Сбросить масштаб просмотра в iOS10 с помощью Javascript

У меня есть страница, которую мне нужно сбросить const viewportmeta = document . querySelector ( 'meta [name = "viewport"]' ); viewport . attr ( 'content' , "initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0" ); масштаб (кратковременное масштабирование) по команде, возвращая его в исходное состояние.

Похоже на старый проверенный метод перезаписи окна attr ():

viewportmeta

похоже, больше не имеет никакого эффекта на ios10 (страница остается увеличенной). Есть ли способ обойти это?

Обновить

.attr - метод jquery, моя ошибка в том, что я оставил это в исходном вопросе (предположительно meta, я пытался собрать несколько разных вещей, чтобы сделать эту работу). Тем не менее проблема остается. Я построил демонстрационную страницу здесь .

На iOS 10+ масштабируется очень далеко, вот так:

введите описание изображения здесь

Изменение видового экрана, когда вы увеличили ширину предыдущего устройства, не изменяет масштаб при изменении метатега в видовом экране. Это делает работу на андроид (по крайней мере , в браузере Chrome).

javascript,ios10,viewport,

5

Ответов: 2

3 принят
+50

вопросы

  1. viewportне является функцией JavaScript. Это метод jQuery.
  2. вы используете, setAttributeчтобы получить metaтег, а затем попытайтесь установить атрибут на viewportпеременную, которая не объявлена.

Решение

Поскольку вы используете JavaScript, используйте этот метод.const viewportmeta = document.querySelector('meta[name=viewport]'); viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");

Синтаксис:

let viewportmeta = document.querySelector('meta[name="viewport"]');

viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));

отрывок

<meta name="viewport" />
content

Он будет установлен, meta[name=viewport]если <meta name="viewport".../>он присутствует на странице.

Если setAttributeна странице нет страницы, создайте ее, используйте, setAttributeчтобы установить name=viewportи добавить ее в голову.

Рабочий фрагмент

let viewportmeta = document.querySelector('meta[name="viewport"]');
if(viewportmeta===null){
  viewportmeta = document.createElement("meta");
  viewportmeta.setAttribute("name","viewport");
  document.head.appendChild(viewportmeta);
  
  viewportmeta = document.querySelector('meta[name="viewport"]');
}
viewportmeta.setAttribute('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
console.log(document.querySelector('meta[name="viewport"]'));

0

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

const viewportmeta = document.querySelector('meta[name=viewport]');
viewportmeta.setAttribute('content', "width=device-width, initial-scale=0");

Это установит масштаб по умолчанию и позволит вашему пользователю снова увеличивать масштаб, если захочет. Я проверил это на своем iPhone 6 / iOS 10

JavaScript, ios10, окно просмотра,
Похожие вопросы
Яндекс.Метрика