Динамическое изменение атрибута метапортпорта в Mobile Safari - PullRequest
1 голос
/ 01 марта 2012

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

Цель состоит в том, чтобы предоставить пользователям Iphone и iPad полезный опыт и максимально устранить ошибку ориентации в Mobile Safari. Я посмотрел на все возможные варианты решений, но они либо не работали должным образом, либо не подходили для проекта, пока я не подумал, что нашел ответ на сайте PPK , где он подразумевает его можно динамически изменять область просмотра с помощью Javascript сразу после объявления.

Я пробовал следующий код безрезультатно:

<meta name="viewport" id="testViewport" content="user-scalable=yes" />
<script>
var mvp = document.getElementById('testViewport');
if (screen.width < 740) {
    alert("mobile screen");
    mvp.setAttribute('content','320');
}
var value = mvp.getAttribute("content");
alert(value);
</script>

Мои оповещения вызываются в том месте, где я ожидал их видеть (поэтому на iPhone последнее оповещение говорит, что 'value' == 320), но в окне просмотра оно отображается естественным образом.

Обратите внимание, я вставил 'user-scalable = yes' в атрибут содержимого изначально, чтобы спасти его от пустоты, пытаясь выяснить, в чем дело.

Любые подсказки или советы будут высоко оценены!

Ответы [ 2 ]

1 голос
/ 01 марта 2012

Согласно https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html, вы должны установить область просмотра с правой строкой width = 320:

mvp.setAttribute('content','width = 320');
0 голосов
/ 02 марта 2012

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

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

вместе с iOS-Orientationchange-Fix

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...