Как заставить ВСЕГДА отображать веб-страницу с соотношением пикселей 1,0 (а не 1,5) на iPhone и Android? - PullRequest
11 голосов
/ 25 октября 2011

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

Итак, как мне отобразить полноразмерную веб-страницу в мобильном браузере, чтобы «300px» на самом деле представлялось 300 реальными пикселями на экране мобильного устройства?

Я знаю о методе метапортпорта, но из того, что я смог сказать, соотношение пикселей, используемое в таких случаях, составляет 1,5 или 1,0, когда зум установлен на 100%, а ширина установлена ​​на device_width, и вы можете определить, с каким соотношением пикселей отображает мобильное устройство. Кажется, я не могу найти какой-то способ явно заставить устройства использовать только отношение 1,0 пикселей, а не соотношение 1,5 пикселей.

Как сделать так, чтобы устройство использовало соотношение пикселей 1,0, чтобы 300 «пикселей», как определено в CSS, фактически отображались на 300 пикселях на экране мобильного устройства? Как отобразить веб-страницу в истинном истинном размере, а не с соотношением пикселей 1,5?

РЕДАКТИРОВАТЬ 6:50 вечера 10.10.2011: Вот пример того, чего я НЕ хочу: В настоящее время, если вы используете метатег для установки свойств окна просмотра мобильного браузера, например:

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

тогда это означает, что мобильный браузер будет визуализировать страницу почти точно так же, как была разработана страница, за исключением того, что каждый «пиксель», определенный в CSS, фактически охватывает 1,5 пикселя на экране устройства, таким образом, соотношение пикселей 1,5. Это соглашение о соотношении 1,5 пикселя было установлено таким образом, чтобы на устройствах с высоким разрешением дизайн не казался слишком малым небольшим.

Я понимаю это, но я не хочу этого в моем случае.

Я ВСЕГДА хочу использовать принудительное соотношение пикселей 1,0, и я буду обрабатывать устройства с высоким разрешением по-своему. Как заставить соотношение 1,0 пикселя в мобильных браузерах?

Вот информация , объясняющая метатег области просмотра и проблему отношения пикселей.

Кроме того, здесь есть трюк , который позволяет отображать различную графику в зависимости от того, какое соотношение пикселей обнаружено, что НЕ является тем, что я хочу делать, но будет, если нет другой опции.

Как заставить соотношение пикселей до значения 1,0?

РЕДАКТИРОВАТЬ 03.11.2011 8:56 pm: Кто-нибудь?

1 Ответ

1 голос
/ 14 июля 2012

Я не уверен, как бы вы его использовали, но я знаю, что медиа-запросы, реализованные в Webkit как -webkit-device-pixel-ratio, могут сказать вам, какое соотношение используется. Префиксы min и max, реализованные Gecko, имеют имена min--moz-device-pixel-ratio и max--moz-device-pixel-ratio; но те же префиксы, что и в Webkit, называются -webkit-min-device-pixel-ratio и -webkit-max-device-pixel-ratio
Взято из: https://developer.mozilla.org/en/CSS/Media_queries/.
Также рассмотрите эту ссылку: http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx. Надеюсь, это поможет.

...