Поддержка target-densitydpi удаляется из WebKit

В соответствии с этим https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit опустил поддержку target-densitydpi из параметров viewport. К сожалению, в описании ошибки не указано ни мотивация изменения, ни обходной путь.

Некоторые веб-страницы, которые хотели предотвратить масштабирование на мобильных устройствах, имели следующее объявление видового экрана:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, 
user-scalable=no, target-densitydpi=device-dpi"/>

Теперь этот код выводит ошибку в Chrome (тестируется с 21.0.1180.49 бета-м). Проконсультируйтесь с тем, каким образом можно сделать веб-страницу без сообщений об ошибках и сохранить то же поведение, что и раньше, с помощью target-densitydpi = device-dpi "

Ответ 1

Листинг списка рассылки webkit-dev http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html содержит обсуждение (или, по крайней мере, фона) удаления функции.

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

UPDATE

Согласно комментарию к упомянутой теме Адамом Бартом, упомянутым автором патча,

Есть некоторые опасения, что target-densitydpi используется некоторыми приложениями, которые в комплекте с Android, но люди, похоже, хотят осудить и перенести эти приложения на другие механизмы, такие как отзывчивые изображения и устройства CSS.

Как вы можете видеть, отзывчивые изображения и устройства устройств CSS кажутся рекомендуемыми "обходными решениями" для того, что предоставил атрибут target-densitydpi. Кроме того, еще один комментарий к той же теме отметил тот факт, что даже с этим атрибутом веб-разработчикам пришлось бы повторно реализовать одну и ту же страницу по-другому, для сред браузера, которые не поддерживают этот атрибут.

Я считаю, что недавно представленный субпиксельный макет станет еще одним средством смягчения проблемы удаления атрибутов.

ОБНОВЛЕНИЕ 2

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

Ответ 2

Я сделал то же самое в последнем Chrome для Android, используя этот jQuery:

<meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>

var viewPortScale = 1 / window.devicePixelRatio;

$('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');

Это устанавливает настройку метатега представления в виде начального масштаба для правильной шкалы для 1 пикселя пикселя CSS = 1.

Вы не можете использовать 'width =' + screen.width, потому что screen.width не возвращает размеры физического пикселя. Я пробовал использовать http://responsejs.com/labs/dimensions/ на своем Nexus 7 в Chrome, и все числа - пиксели в окне просмотра.

Ответ 3

Я не уверен, но, возможно, можно эмулировать target-densitydpi, установив "width" в metatag viewport равным ширине экрана в "физических" пикселях. К сожалению, AFAIK, нет 100% -ного способа получить ширину пикселя устройства, но что-то вроде

<meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script>
if(navigator.userAgent.toLowerCase().indexOf('android') > -1)
    document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
</script>

должен работать на большинстве андроидов (Джеймс Пирс: Во-первых, Поймите свой экран).

Ответ 4

Вы пытались добавить minimum-scale? К сожалению, у меня нет телефона для Android, поэтому я не могу проверить его для вас.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

Ответ 5

Я проверил это без успеха. Вот сообщение, которое я имею в консоли chrome: ключ "mimimum-scale" не распознается и игнорируется.