如何在移動視圖中自動切換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類？

回答

相關問題