如何在移动视图上自动切换 CSS 类？答案

【问题标题】：How can I toggle a css class automatically on mobile view?如何在移动视图上自动切换 CSS 类？
【发布时间】：2015-04-26 08:25:18
【问题描述】：

当用户在移动设备上打开网站时，我想自动切换一个 asp.net 控件（文本框）类。

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

有什么想法吗？

【问题讨论】：

与其使用 JavaScript，不如使用 CSS 媒体查询？
谢谢，实际上我已经尝试过使用它，甚至使用引导程序。但我被困在某一点上。我还发布了这个问题，您可能会看到我的问题在哪里stackoverflow.com/questions/29868198/…
有人告诉我，java 脚本可以解决这个问题。该代码适用于平板电脑和台式机。但它只在 Iphone 上有问题。
我没有看到有人告诉你 JavaScript 可以解决这个问题。即使别人告诉你，这也不是一个好主意。 CSS 主要用于设置网页样式。 CSS 媒体查询是用于针对特定设备尺寸定位 CSS 的工具。调查一下，你可能会找到答案。
谢谢，已使用具有屏幕尺寸的媒体查询解决了这个问题。

标签： javascript css asp.net toggleclass asp.net-controls

【解决方案1】：

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" />

【讨论】：