Ширина браузера для мобильных телефонов

Question

У меня есть Nexus 5, и когда я иду на http://ryanve.com/lab/dimensions/, он говорит мне, что моя ширина 360. Я понимаю, что есть разница между разрешением моего телефона и шириной моего браузера.

Однако, когда я пишу функцию, чтобы изменить в соответствии с 767:

function detectmob() { 
    if($(window).width() <= 767) { 
     return true; 
    } 

    else { 
     return false; 
    } 
} 

if (detectmob()){ 

} 

else { 

} 

Это не работает на моем телефоне. Если я изменил размер окна браузера на < = 767 на моем ноутбуке, функция будет работать правильно. Когда я смотрю его на своем Nexus 5, это не так.

Может ли кто-нибудь помочь мне написать функцию для таргетинга мобильных устройств с использованием ширины браузера?

Answer 1

Когда вы посещаете веб-сайт через мобильный браузер, предполагается, что вы просматриваете большой рабочий стол и хотите видеть его все, а не только в верхнем левом углу. Поэтому он установит ширину видового экрана в (в случае iOS Safari) 980px, все в порядке на экране.

видовом экране Meta Tag

Введите видовых мета-тег, введенный Apple, а затем принят и дальнейшее развитие других.

Это выглядит следующим образом:

<meta name="viewport" content=""> 

В содержание = «» Вы можете ввести нагрузку через запятую значений, но мы собираемся сосредоточиться на основных из них на данный момент.

Например, если ваш мобильный дизайн специально выложили на 320px вы можете указать ширину видового экрана:

<meta name="viewport" content="width=320"> 

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972