如何在移动设备视图中自动切换 css class？

Question

我想在用户使用移动设备打开网站时自动切换 asp.net 控件（文本框）class。

我尝试了以下代码，它可以自动获取屏幕尺寸。但现在我想更改或添加一个新的 class 到将文本框宽度设置为 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 Class

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

有什么想法吗？

Answer 1

Detecting mobile is awful - and I'd avoid it if you can. However, if you'd like to detect a screen size you should use CSS Media Queries.

将 class 添加到您的 HTML (ASP):

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

然后在 class

上使用 CSS

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

PS：同样重要的是要注意许多移动浏览器会尝试假装比实际分辨率更高。要告诉浏览器不要这样做，您必须添加元视口：

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

如何在移动设备视图中自动切换 css class？

How can I toggle a css class automatically on mobile view?

javascript

css

asp.net

asp.net-controls

toggleclass