Метаданные Viewport не работают в iPhone и Android
Я использую следующий html-код
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
test
</body>
</html>
Мое намерение состоит в том, чтобы запретить пользователю увеличивать или уменьшать масштаб. Вышеприведенный код не работает в iPhone и Android. Любое решение?
РЕДАКТИРОВАТЬ: Он отображается в настройках iPhone, если Zoom
выбран как On
в разделе Settings>Accessibility>Zoom
, тогда это переопределит метатег. Источник
Не уверен, почему это происходит в android.
Ответы
Ответ 1
Я использую этот тег для предотвращения масштабирования всех мобильных платформ:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
С ;
и не ,
Ответ 2
В свою очередь, у меня есть этот "просмотр", который хорошо работает на Android (Nexus 5) и на iPhone.
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />
Я надеюсь, что это поможет вам!
Ответ 3
установите этот script, чтобы избежать масштабирования. в последней версии сафари, если метатег не работает
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
Ответ 4
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />
хорошо работал на Samsung Galaxy S3
Ответ 5
Некоторое время вам нужно добавить -webkit-flex: 1 в контейнеры (если используется flexbox). Это помогло мне с моей проблемой просмотра.