Медиа-запросы и соотношение пикселей устройства

Question

Я занимаюсь редизайном своего сайта и решил попробовать адаптивный макет. Я новичок в медиа-запросах CSS3 и не могу понять, как заставить сайт вести себя так, как задумано на моем смартфоне.

На странице есть метатег этого видового экрана:

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

Я не уверен, что он делает, так как я не вижу разницы между наличием и отсутствием этого в моем HTML, но мне сказали, что это было как-то полезно.

Предполагается, что таблицы стилей предназначены для ширины R < 640px, 640px <= R < 960px и 960px <= R. Компоновка будет соответственно шириной 320px, 640px и 960px.

Проблема, с которой я сталкиваюсь, связана с моим смартфоном (и, возможно, со всеми современными карманными устройствами с высокой плотностью пикселей). Мой смартфон имеет физическое разрешение 480x800 пикселей, но в альбомном режиме сообщает о ширине 533 пикселей (его соотношение пикселей составляет 1,5, а 800/1,5 = 533,33, поэтому я предполагаю, что это ожидаемое значение). Начиная с 533 < 640, отображаемая схема является самой узкой: 320 пикселей. Я знаю, что средний выглядит хорошо на смартфоне и предпочел бы использовать это. Что я должен сделать, чтобы смартфон отображал макет 640 пикселей в альбомном режиме, не нарушая текущие правила, которые работают для настольных браузеров с соотношением пикселей 1:1?

Текущие медиазапросы для каждого макета (320, 640, 960 соответственно):

@media only screen and (max-width: 639px)

@media only screen and (min-width: 640px) and (max-width: 959px)

@media only screen and (min-width: 960px)

Answer 1

Этот вопрос / ответ может помочь вам: существует ли какой-либо эквивалент Android для Safari на iPhone? который в свою очередь указывает на эту очень полезную статью: http://davidbcalhoun.com/2010/viewport-metatag

<meta name="viewport" content="target-densitydpi=device-dpi" />

Следует обратить внимание на то, что это подходящее решение для Android, но, возможно, не работает на устройствах iOS (у вас нет Mac или iPhone для подтверждения).

Answer 2

Я бы предпочел использовать медиа-запрос:

    @media only screen and (max-width: 639px) and (-Webkit-min-device-pixel-ratio: 1.5), 
    @media only screen and (max-width: 639px) and (-moz-min-device-pixel-ratio: 1.5),
    @media only screen and (max-width: 639px) and (-o-min-device-pixel-ratio: 3/2),
    @media only screen and (max-width: 639px) and (min-device-pixel-ratio: 1.5),
    @media only screen and (min-width: 640px) and (max-width: 959px)