Подтвердить что ты не робот

Полная веб-страница и отключенный метадатчик view viewport для всех мобильных браузеров

Я хочу, чтобы моя веб-страница отображалась в полноэкранном режиме и отключила масштабирование на всех мобильных устройствах.

С помощью метатега:

<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.

4b9b3361

ОТВЕТЫ

Ответ 1

К сожалению, у каждого браузера есть собственная реализация метатега viewport. Различные комбинации будут работать в разных браузерах.

Android 2.2: метатег viewport не поддерживается вообще.

Android 2.3.x/3.x. Установив user-scalable = no, вы также отключите масштабирование метатега viewport. Вероятно, поэтому ваш параметр ширины не имеет эффекта. Чтобы позволить браузеру масштабировать ваш контент, вам нужно установить масштабируемое пользователем = да, а затем отключить масштабирование, вы можете установить минимальную и максимальную шкалу на одно и то же значение, чтобы оно не могло сокращаться или расти. Игрушка с начальным масштабом, пока ваш сайт не будет плотно прилегать.

<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-scaleable = yes, пользователь всегда может увеличить масштаб, установив его "нет" означает, что ваш собственный масштаб игнорируется, вот в чем проблема, с которой я столкнулся сейчас, что привлекло меня к этому вопросу... Кажется, вы не можете одновременно отключить масштабирование и масштабирование в 4.x.

iOS/Safari (проверено на 4.x/5.x): масштабирование работает, как и ожидалось, вы можете отключить масштабирование с помощью user-scaleable = 0 (ключевые слова yes/no не работают в 4.Икс). В iOS/Safari также нет понятия target-densitydpi, поэтому вы должны оставить это во избежание ошибок. Вам не нужно min и max, так как вы можете отключить масштабирование в ожидаемом режиме. Используйте только ширину или вы столкнетесь с ошибкой ориентации iOS

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

Chrome. Масштабы работают так, как ожидалось, как в iOS, минимальные и максимальные значения выполняются, и вы можете отключить масштабирование с помощью масштабируемого пользователя = нет.

<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 БЕЗ использования окна просмотра, пожалуйста, дайте мне знать.

[EDIT]

Android 4.x браузер Chrome (который, как мне кажется, предварительно установлен в большинстве стран): вы можете убедиться, что пользователь не может увеличить масштаб, а страница - в полноэкранном режиме. Недостаток: вы должны убедиться, что контент имеет фиксированную ширину. Я не тестировал это на более низких версиях Android. Для этого см. Пример:

<meta name="viewport" content="width=620, user-scalable=no" />

[ИЗМЕНИТЬ 2]

iOS/Safari 7.1. Начиная с версии v7.1, Apple представила новый флаг для метатега viewport под названием minimal-ui. Чтобы помочь в полноэкранных приложениях, это скрывает адресную строку и нижнюю панель инструментов для полноэкранного просмотра (не совсем полноэкранный API, но закрывает и не требует принятия пользователем). Он также имеет справедливую долю ошибок, а также и не работает в iPads.

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[EDIT 3]

iOS/Safari 8 Beta 4. Метатег viewport minimal-ui, упомянутый в EDIT 2, теперь был удален Apple в этой версии. Источник - заметки WebKit

Ответ 2

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);
}

Вариант второй - немного больше, если вы обнаружите несогласованность.

Ответ 3

Просто используйте:

<meta name="HandheldFriendly" content="True" />

Хорошо работает на моем Samsung Note II и HTC Desire.

Ответ 4

Для устройств 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

Ответ 5

У меня есть 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">

Ответ 6

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" />

Ответ 7

У меня возникли проблемы с этим и даже начали создавать систему обнаружения браузера для доставки различных тегов в разные браузеры. Затем я решил попробовать упростить то, что я делал, и все сработало. Установите область просмотра в ширину, в которой вы хотите, чтобы ваш сайт был и ушел, все работает сейчас.

<meta name="viewport" content="width=1165 />

Ответ 8

Для чего это стоит, вот то, что я использовал для того, чтобы получить страницу содержимого ширины 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-scaleable = no фактически отрицает минимальную и максимальную шкалу). Я получил значение .94 методом проб и ошибок, а не каким-либо вычислением, вызывающим плотность пикселей устройства или что-то в этом роде.

* т.е. чтобы заставить ширину содержимого соответствовать окну - я использовал js для условного написания метаданных в окне просмотра.

Ответ 9

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>

Ответ 10

Мы использовали следующий 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>

Вы можете добавить дополнительные условия и установить их для своих конкретных потребностей.

Ответ 11

Ниже предложение от Dan B отлично поработало для меня, у меня были всевозможные проблемы, которые пытались загрузить мой сайт прямо на Android, и это его отсортировало. В любом случае!

<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

Спасибо!

Ответ 12

Я использую этот код для предотвращения масштабирования iPhone, и проблема решена, но возникает другая проблема; когда я нажимаю на поле ввода, всплывает всплывающее окно, а затем устанавливает его положение в нормальное состояние, когда я нажал кнопку go, происходит такое же поведение, и окна перескакивают. мне нужно избавиться от прыжка, так что только окно изменяет его размер до нормального местоположения.

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}