Как формируется device-width устройств и можно ли этим управлять?

Question

[toyvo_glumov]

Адаптировал сайт под мобильные через медиа запросы (min-width: 480, 640, 768, 960, 1025), добавил в head

<meta content='width=device-width,initial-scale=1' name='viewport'/>

Проверил как выглядит на люмии 720*1024 (больше не на чем). Почему она масштабирует ширину до 320px (в вертикальном положении)? Почему 720 пикселей переводятся девайсом не в 300 или 360 или 480, а именно 320?
И главное — можно ли как-то сделать, чтобы девайс выдавал минимально возможную ширину 360?

Answer 1

[Дима Паутов]

Как бы это сказать. Есть физические пиксели(физический размер экнара), а есть цифровые, разрешение матрицы(1920-1080).

Ведь если мой 27 моник имеет разрешение 1920-1080, то и телефон диаметром 5 дюймов может иметь тоже разрешение, а то и больше. Но сайт, адаптируется под физические размеры устройства. О чем и свидетельствует параметр в мета теге width=device-width. device-width - Ширина девайса.

У 5 iphone физический размер экрана 320px. Поэтому и адаптивный сайт на нём будет отображаться в 320px.

Comments

[toyvo_glumov]

Это я нагуглил, вопрос в том, можно ли диктовать устройству, какое разрешение он должен показывать на своих 320 физических пикселях. Ведь без мета-тега content он будет легко засовывать туда и 1080. Почему бы не сказать ему, мол, ок подгоняй ширину под свои физические пиксели, но так, чтобы она была не меньше 360 виртуальных?

[Дима Паутов]

toyvo_glumov: Зачем вам это? width=device-width поменяйте на width=400 или своё число. И браузер будет масштабировать под этот размер

[toyvo_glumov]

Дима Турков: ну разве 320 это не слишком мало, учитывая отступы от краев экрана под контент остается 300 несчастных пикселей, да и простите за меркантильность, даже 328 блок адсенса не влезает в 320.

[Дима Паутов]

toyvo_glumov: Нет. Спросите об этом всех пользователе iphone 4-5

[Aleksandr Kulikov]

toyvo_glumov: Гугли рекомендуют работать с полотном, а не физическим разрешением: "A note on min-device-width
It is also possible to create queries based on *-device-width; though this practice is strongly discouraged.

The difference is subtle but very important: min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.

In addition, using *-device-width can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window." и так далее

[toyvo_glumov]

RunCatRun: Это где он рекомендует использовать? В css медиа-запросах или в мета-теге? Если в медиа-запросах, то там у меня и так min-width везде.