Как я могу автоматически переключать класс css на мобильный вид?

Я хотел бы автоматически переключить класс управления asp.net (текстовое поле), когда пользователь открывает веб-сайт на мобильном устройстве.Как я могу автоматически переключать класс 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

Спасибо, на самом деле я пытался использовать это и даже с помощью бутстрапа. но я застрял в одном пункте. Я также разместил этот вопрос, вы можете увидеть, где моя проблема 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 на мобильный вид?

ответ

Смежные вопросы