[英]How can I toggle a css class automatically on mobile view?
I would like to automatically toggle an asp.net control (Textbox) class when a user opens the website on mobile. 当用户在移动设备上打开网站时,我想自动切换asp.net控件(文本框)类。
I tried the following code it works to get the screen size automatically. 我尝试了以下代码,它可以自动获取屏幕大小。 but now I want to change or add a new class to the textbox which sets the Textbox width to 100%. 但是现在我想更改或向文本框添加新类,以将文本框宽度设置为100%。
Javascript code 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.net C#
<asp:TextBox ID="TextBox1" runat="server" ></asp:Textbox>
Css Class CSS类
<style type="text/css">
.mobMini {
width:100%;
}
</style>
Any ideas? 有任何想法吗?
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 . 但是,如果您想检测屏幕尺寸,则应使用CSS Media Queries 。
Add a class to your HTML (ASP): 将类添加到HTML(ASP):
<asp:TextBox ID="TextBox1" runat="server" class="altMobile" ></asp:Textbox>
Then use CSS on that class 然后在该类上使用CSS
@media screen and (max-width:470px) {
.altMobile {
width: 100%
}
}
PS: It's also important to note that many mobile browsers will try to pretend to be higher resolution than they are. PS:还需要注意的是,许多移动浏览器将试图假装比其具有更高的分辨率。 To tell browsers not to, you must add meta viewport: 要告诉浏览器不要这样做,必须添加元视口:
<meta name="viewport" content="width=device-width, initial-scale=1" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.