如何在移动视图中自动切换css类？

我想在用户在手机上打开网站时自动切换一个asp.net控件（Textbox）类。如何在移动视图中自动切换css类？

我试了下面的代码，它的工作原理是自动获得屏幕大小。但现在我想更改或添加一个新的类到文本框的文本框宽度设置为100％。

Javascript代码

<script type="text/javascript"> 
window.onload = function() { responsiveFn(); } 
function responsiveFn() { 
width = $(window).width(); 
height = $(window).height(); 

if (width <= 470) 
{ 
var cntltxtInput = document.getElementById(<%=TextBox1.ClientID %>); 
cntltxtInput.setAttribute("class", "mobMini"); 
document.getElementById('widthID').innerHTML += "This is an Iphone S"; 
} 
} 
</script>

Asp.net C＃

<asp:TextBox ID="TextBox1" runat="server" ></asp:Textbox>

CSS类

<style type="text/css"> 
.mobMini { 
width:100%; 
} 
</style>

任何想法？

来源

2015-04-25 rebo lavo

而不是使用JavaScript，为什么不使用CSS媒体查询？ – mason

谢谢，实际上我试过使用它，甚至使用bootstrap。但我陷入了一点。我也发布了这个问题，你可能会看到我的问题在哪里 http://stackoverflow.com/questions/29868198/textbox-and-button-levels-in-mobile-view –

和我被告知，Java脚本可以解决这个。该代码适用于平板电脑和桌面。但它只在iphone上有问题。 –

Detecting mobile是可怕的 - 如果可以的话，我会避免它。但是，如果您想检测屏幕大小，则应使用CSS Media Queries。

类添加到您的HTML（ASP）：

<asp:TextBox ID="TextBox1" runat="server" class="altMobile" ></asp:Textbox>

然后在这个类使用CSS

@media screen and (max-width:470px) { 
    .altMobile { 
     width: 100% 
    } 
}

PS：同样重要的是要注意，许多移动浏览器将尝试假装分辨率比他们高。为了告诉浏览器不要，你必须添加元视口：

<meta name="viewport" content="width=device-width, initial-scale=1" />

来源

2015-04-26 00:04:13 Cosine

如何在移动视图中自动切换css类？

回答

相关问题