Я хочу, чтобы моя веб-страница была полноэкранной и отключила масштабирование на всех мобильных устройствах.
С метатегом:
<meta name="viewport" content="width=1165, user-scalable=no">
Я могу сделать это для iPhone/iPad, но на устройствах Android масштаб веб-сайта составляет примерно 125%.
Если я использую тег
<meta name="viewport" content="width=max-device-width, user-scalable=no">
Я получаю обратный результат. Итак, он работает на Android, но не работает на iPad/iPhone.
К сожалению, каждый браузер имеет собственную реализацию метатега области просмотра. Различные комбинации будут работать в разных браузерах.
Android 2.2: метатег области просмотра, похоже, вообще не поддерживается.
Android 2.3.x/3.x: установив user-scalable=no, вы также самостоятельно отключите масштабирование метатега области просмотра. Вероятно, поэтому ваш параметр ширины не имеет никакого эффекта. Чтобы позволить браузеру масштабировать ваш контент, вам нужно установить user-scalable=yes, а затем, чтобы отключить масштабирование, вы можете установить минимальное и максимальное масштабирование на одно и то же значение, чтобы он не мог уменьшаться или увеличиваться. Играйте с начальным масштабом, пока ваш сайт не будет плотно прилегать.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x: применяется то же правило, что и для 2.3.x, за исключением того, что минимальный и максимальный масштабы больше не учитываются, и если вы используете user-scalable=yes, пользователь всегда может масштабировать , установка для него значения «нет» означает, что ваш собственный масштаб игнорируется, это проблема, с которой я столкнулся сейчас, которая привлекла меня к этому вопросу ... Похоже, вы не можете отключить масштабирование и масштабирование одновременно в 4.x.
iOS/Safari (проверено 4.x/5.x): масштабирование работает должным образом, вы можете отключить масштабирование с помощью user-scalable=0 (ключевые слова yes/no don't не работает в 4.x). iOS/Safari также не имеет понятия target-densitydpi, поэтому вам следует его исключить, чтобы избежать ошибок. Вам не нужны минимальные и максимальные значения, так как вы можете отключить масштабирование ожидаемым образом. Используйте только width, иначе вы столкнетесь с ошибкой ориентации iOS
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome: масштабы работают так же, как и в iOS, минимальные и максимальные значения учитываются, и вы можете отключить масштабирование с помощью user-scalable=no.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
Вывод. Вы можете использовать довольно простой JS для соответствующей настройки контента после базового определения браузера/устройства. Я знаю, что этот тип обнаружения осуждается, но в данном случае это почти неизбежно, потому что каждый поставщик пошел и сделал свое дело! Надеюсь, это поможет людям бороться с областью просмотра, и если у кого-то есть решение для отключения масштабирования в Android 4.x БЕЗ использования области просмотра, сообщите мне об этом.
[РЕДАКТИРОВАТЬ]
Браузер Chrome для Android 4.x (который, по-моему, предустановлен в большинстве стран): вы можете сделать так, чтобы пользователь не мог увеличивать масштаб, а страница отображалась в полноэкранном режиме. Недостаток: вы должны убедиться, что контент имеет фиксированную ширину. Я не тестировал это на более низких версиях Android. Для этого см. пример:
<meta name="viewport" content="width=620, user-scalable=no" />
[РЕДАКТИРОВАТЬ 2]
iOS/Safari 7.1. Начиная с версии 7.1, Apple представила новый флаг для метатега области просмотра под названием minimal-ui. Чтобы помочь с полноэкранными приложениями, это скрывает адресную строку и нижнюю панель инструментов для полноэкранного режима (не совсем полноэкранный API, но закрывается и не требует согласия пользователя). Он поставляется с изрядной долей ошибок и не работает на iPad.
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[РЕДАКТИРОВАТЬ 3]
iOS/Safari 8 Beta 4: метатег окна просмотра minimal-ui, упомянутый в EDIT 2, теперь удален Apple в этом выпуске. Источник — WebKit Notes
HTML
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
JQuery
Опция 1:
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
Вариант 2:
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
Второй вариант является скорее последним средством, если вы обнаружите несоответствие.
Просто используйте:
<meta name="HandheldFriendly" content="True" />
Хорошо работает на моем Samsung Note II и HTC Desire.
Для устройств Apple это просто:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
Первый тег запускает веб-приложение в полноэкранном режиме, когда вы открываете его с помощью ярлыка, размещенного на главном экране iPhone/iPod/iPad.
Второй тег работает только в связке с первым. Возможные значения: по умолчанию, черный и черный-полупрозрачный.
Третий тег блокирует ширину сайта до стандартного размера (1.0) и не позволяет масштабировать.
ПРИМЕЧАНИЕ. Поскольку метатеги «apple-mobile» игнорируются на устройствах, отличных от Apple, а третий тег является официальным в HTML5, вы можете использовать их все вместе.
Для Android у вас нет глобального решения, поскольку не все используют веб-браузер Android по умолчанию. См. раздел Полноэкранное веб-приложение для Android.
Вот еще несколько полезных ссылок:
Советы для iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Все официальные и неофициальные известные метаданные: https://gist.github.com/kevinSuttle/1997924
У меня Samsung Galaxy Note 4, и я использую Chrome в качестве браузера. Я обнаружил, что он игнорирует метатеги окна просмотра, заставил его работать с HandheldFriendly. Я закончил с комбинацией метатегов. У меня работает на Android и iOS.
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">
Android исправил это с версии 4.4.2
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
У меня были всевозможные проблемы с этим, и я даже начал создавать систему обнаружения браузера, чтобы доставлять разные теги окна просмотра в разные браузеры. Тогда я решил попробовать упростить то, что я делал, и все заработало. Установите для области просмотра ширину, которую вы хотите, чтобы ваш сайт был, и уходите, теперь все работает.
<meta name="viewport" content="width=1165 />
Что бы это ни стоило, вот что я использовал, чтобы страница содержимого шириной 1024 пикселя отображалась точно в полноэкранном режиме на моем Nexus 7 (Android 4.2.2)/Chrome, только в альбомной ориентации, не прибегая к javascript*:
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
(Я думаю, что user-scalable=no на самом деле сводит на нет минимальную и максимальную шкалу). Я получил значение 0,94 путем проб и ошибок, а не с помощью каких-либо вычислений, использующих плотность пикселей устройства или что-то в этом роде.
*т.е. чтобы заставить ширину содержимого соответствовать окну - я использовал js для условной записи мета-контента области просмотра.
Мы использовали следующий Javascript в заголовке для установки метатегов:
<script>
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
} else {
document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need
}
</script>
Вы можете добавить дополнительные условия и настроить их для своих конкретных нужд.
Приведенное ниже предложение от Dan B отлично сработало для меня, у меня были всевозможные проблемы, пытаясь заставить мой сайт загружаться прямо на Android, и это решило его. Во всяком случае пока!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
Спасибо!
Я использую этот код, чтобы предотвратить масштабирование iPhone, и проблема была решена, но возникает другая проблема; когда я нажимаю на поле ввода, все окно подпрыгивает, а затем устанавливает его положение в нормальное положение, когда я нажимаю кнопку «Перейти», происходит такое же поведение, и окна прыгают. мне нужно избавиться от прыжка, чтобы только окно изменяло его размер до нормального положения.
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
