Фактическое разрешение для мобильных устройств

Question

Я новичок в HTML5 & CSS3, поэтому я работаю над простым проектом, чтобы узнать его лучше. Недавно я обнаружил отзывчивый дизайн, поэтому я создаю страницу, которая масштабируется для моего телефона. Я использую медиа-запросы, я создал два состояния, один для экранов 640px (мобильный) и меньше, а другой для экрана 641px и больше (рабочий стол). Сайт отлично работает, показывая правильные стили на моем рабочем столе, когда я масштабирую окно и показываю правильный стиль, когда я просматриваю его на своем телефоне.

Однако после запуска сайта я решил проверить разрешение своего HTC One - это 1080p. Мой телефон отображает сайт 640px независимо от ориентации. Мне интересно, почему это происходит; более высокое разрешение телефона не должно вызывать состояние мобильного устройства, но это так. Я думаю, что меня могут смутить то, как действительно работают разрешения.

Итак, как определить истинное разрешение телефонов (и планшетов), чтобы я мог создавать для них соответствующие масштабируемые сайты?

//Mobile 
@media screen and (max-width: 640px) { 
    ... 
} 

//Desktop 
@media screen and (min-width: 641px) { 
    ... 
} 

Редактировать Благодаря JoshCs комментарий ниже, я понял, что я имел видовых мета-тег используется из учебника. Я хотел бы пересмотреть свой вопрос, чтобы спросить: как тег viewport определяет, какое разрешение отображать для любого данного устройства (как определить разрешенное изображение на основе размеров устройства)?

<meta name="viewport" content="width=device-width; initial-scale=1.0"> 

Answer 1

CSS-аббревиатура - это абстрактная концепция, которая не зависит от фактических пикселей на экране. В частности, это независимый от плотности пиксель. В зависимости от плотности физического пикселя устройств логический CSS-пиксель масштабируется по размеру относительно физических пикселей. Например, во многих устройствах ширина экрана 640 имеет соотношение пикселов CSS равное 2. Таким образом, два пикселя используются для рисования одного пикселя CSS.

Когда вы используете метатаг viewport, вы указываете браузеру масштабировать CSS-пиксель, используя соотношение пикселей.

Вы можете определить пиксельный рацион устройства в браузерах webkit, используя window.devicePixelRatio. Эта пара с подсчетом физического пикселя может использоваться для определения разрешения просмотра.

---

Список литературы

• How can you get the CSS pixel/device pixel ratio?
• http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
• What is Device Pixel Ratio for?
• what exactly is device pixel ratio?
• http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
• http://gamon.org/blog/2013/04/26/css-pixel-ratios-or-why-all-mobile-sites-are-320-pixels/

Answer 2

Это, как я его настроить:

<meta name="viewport" content="width=device-width"> 

CSS:

/********** Desktop - 920px breakpoint ***************************/ 
@media screen and (max-width: 60em) {} 

/*iPAD SUPPORT=====================================--*/ 
@media (max-width: 56.250em) {} 

/*NEXUS SUPPORT=====================================--*/ 
@media (max-width: 44.063em) {} 

/*iPhone SUPPORT=====================================--*/ 
@media screen and (max-width: 22.500em) {} 

Вы можете использовать JQuery, чтобы изменить порт базы на размер вида:

// Check for device screen size 
if($.mobile.media("screen and (max-device-width: 640px)")) { 
    // Change viewport for smaller devices 
    $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1'); 
} 

Надеюсь, что это поможет :)