Как отключить масштабирование видового экрана в Mobile Safari?


393

Я пробовал все три из них безрезультатно:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

каждое из них - разные значения, которые я рекомендовал для поиска в Google или SO, но ни одно из значений ' user-scalable = X ' не работает

Я также попытался разделить запятые значения вместо точки с запятой, не повезло. Тогда я попробовал ТОЛЬКО иметь user-scalableнастоящее значение, но все же не повезло.


ОБНОВИТЬ

Получил это с сайта Apple, и это работает:

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

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


6
Если вы делаете игру, то, возможно, управление масштабированием является действительным. Однако почти во всех других случаях это настоятельно не рекомендуется. К сожалению, это стало стандартной практикой для многих разработчиков мобильных приложений. Если пользователь хочет увеличить масштаб, чтобы иметь возможность легче читать текст и т. Д., Мешая ему это сделать, это не очень хорошо.
user2268788

72
Мы отключаем масштабирование в мобильном веб-приложении. Вы не можете увеличить собственные приложения iOS, и это не требуется в нашем веб-приложении. Если ваш сайт или приложение оптимизировано для мобильных устройств, пользователям не нужно увеличивать масштаб. Всегда есть варианты использования для отключения зума. Это не всегда должно быть так или иначе.
Брэдли Флад

10
Да, я не придерживаюсь логики, что отключение масштабирования на оптимизированном для мобильных устройств сайте - это плохо . Что гораздо хуже, это случайное панорамирование области просмотра, потому что экран улавливает случайное панорамирование и масштабирование на сайте, который не требует увеличения в любом случае. Реально, если ваши пользователи нуждаются в увеличении контента на вашем оптимизированном для мобильных устройств сайте, то проблема заключается в дизайне, а не в отсутствии увеличения.
Натан Хорнби

3
@NathanHornby: проблема отключения зума заключается в отсутствии уважения к предпочтениям пользователя. Разные пользователи предпочитают разный размер текста, более молодая аудитория с хорошим зрением может предпочесть видеть больше контента, в то время как аудитория с плохим зрением не может использовать то, что не имеет гигантского текста. У других людей болезнь Паркинсона, но у них все еще хорошее зрение, поэтому они предпочитают очень большие кнопки, но в целом не получают большого текста.
Ли Райан

4
@NathanHornby Это не значит, что дизайнер обязательно что-то сделал не так. Это просто означает, что пользователь по какой-либо причине хочет увеличить масштаб. Pinch-zoom - стандартная функция всех телефонов с сенсорным экраном. Любой пользователь, владеющий таким телефоном, знает, как им пользоваться. Я знаю, что это старый вопрос, но я все еще постоянно разочарован разработчиками, которые все знают, которые настаивают на нарушении функциональности моего телефона, потому что они думают, что его дизайн выглядит лучше.
user1751825

Ответы:


719

Ваш код отображает двойные кавычки атрибута как причудливые двойные кавычки. Если в вашем исходном коде присутствуют причудливые кавычки, я думаю, в этом проблема.

Это работает для меня на мобильном Safari в iOS 4.2.

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

12
это были модные цитаты, я скопировал тег с веб-сайта, не заметив, спасибо за указание на это!
MetaGuru

5
Возможно, это далеко позади, но, возможно, стоит указать, что это необходимо применить на странице «верхнего уровня». Если этот метатег применяется к iframe, он не будет работать, если метатег также не будет применен к самой верхней странице.
Founddrama

2
Почему кто-то когда-либо создает программу, которая создает необычные цитаты, мне не понятно.
Traubenfuchs

3
@Traubenfuchs: Типография.
BoltClock

3
Это довольно старый ответ, и я подхожу к проблеме, которую я прочитал: если вы установите для user-scaleable значение no, это вызовет проблемы с доступностью. Начиная с iOS 10, он работает нормально, позволяя пользователю увеличивать масштаб, если он пожелает, но не масштабировать поле ввода в противном случае. Нет необходимости устанавливать большие размеры шрифта.
Дэвид

161

Для тех, кто ищет решение для iOS 10, user-scaleable=noон отключен в Safari для iOS 10. Причина в том, что Apple пытается улучшить доступность, позволяя людям увеличивать веб-страницы.

Из заметок о выпуске :

Чтобы улучшить доступность веб-сайтов в Safari, пользователи теперь могут увеличивать масштаб, даже когда веб-сайт устанавливает пользовательский масштабируемый = нет в окне просмотра.

Так что, насколько я понимаю, нам не повезло.


6
Какое ужасное решение от Apple. Использование счетчика с кнопками «-» и «+» для уменьшения / увеличения числа теперь многократно увеличивает и уменьшает страницу в iOS Safari. Прессы интерпретируются как двойное касание для увеличения, без возможности отключить это. iOS Chrome работает отлично. Разочарование.
Пол

5
Хотя я не согласен с этим решением, но я действительно доволен Apple как пользователем, поскольку я хотел использовать эту функцию на многих веб-сайтах, которые использовали небольшие элементы внутри.
Bishoy Hanna


2
О боже, кто бы мог догадаться? Еще один нелепый выбор, сделанный Apple
Эмиль Педерсен

3
Оставьте это Apple, чтобы навязать всем «особенность» специальных возможностей вместо того, чтобы просто добавить для нее опцию в настройках специальных возможностей ...
Леннхольм,

99

@mattis правильно, что iOS 10 Safari не позволит вам отключить масштабирование с помощью масштабируемого пользователем атрибута. Тем не менее, я получил его, чтобы отключить использование protectDefault для события'eststart '. Я только подтвердил это на Safari в iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

8
На iOS 10 я обнаружил, что это работает, но если вы прокручиваете страницу, а затем масштабируете ее, продолжая прокручивать, она разрешает увеличение. Затем вы застреваете на новом уровне масштабирования, пока не прокрутите снова. Так что это не выглядит хорошим решением, если тело вашей страницы не прокручивается. :(
Рэнд Скаллард

1
Одно предостережение: пользователь все равно может дважды нажать на экран, который будет / может увеличивать масштаб и не будет пойман этим.
Стивен

1
Тем не менее иногда позволяет масштабирование, дважды нажав на экран. :(
Jarzka

4
Что эквивалентно двойному нажатию gesturestart? dblclick ?
lowtechsun

3
Еще одно замечание, если вы хотите отключить двойное касание аспекта масштабирования. Mobile Safari также поддерживает «сенсорное действие: манипулирование» (подпадает под «базовую поддержку», которая отключает события двойного нажатия. Документация здесь: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress

15

для iPhone Safari до iOS 10 «окно просмотра» не является решением, мне не нравится этот способ, но я использовал этот код JavaScript, и это помогло мне

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

3
Это должно бытьevent.scale !== 1
aleclarson

@aleclarson event.scale> 1 включает условие event.scale! == 1
Артур Цидкилов

@aleclarson для предотвращения масштабирования на Mobile Safari достаточно, я написал, что мне не нравится этот способ, обычно для него нужно использовать viewport, но на IOS iphone 6 и выше он не работает (я думаю, что ваше event.scale ! == 1 должно быть правильнее, но все это не правильно, это отчасти хакинг)
Артур Цидкилов

@aleclarson Кажется, использование! == ломает родной браузер в Android 4.4; event.scale не определено.
Джеймс Пиззурро

3
@JamesPizzurro Да, вы можете использоватьevent.scale !== undefined && event.scale !== 1
aleclarson

11
user-scalable=0

Это больше не работает на iOS 10. Apple удалила эту функцию.

Теперь вы не можете отключить масштабирование веб-сайта на iOS, если только вы не создадите приложение для большой платформы.


Такой облом ... Есть идеи, почему они это убрали?
Стивен Тетро

3
@ smt они не хотят, чтобы веб-интерфейс конкурировал с веб-магазином приложений.
Марвин Даниг

2
@marvindanig да ... так как они платят 99 долларов за создание приложения, которое можно было бы легко сделать более доступным приложением для веб-страниц для всех платформ. Также Apple не может понравиться «веб-опыт», если это означает, что пользователи + разработчики могут избегать окруженного стеной сада. Это все о власти и деньгах Apple :(
человечествоANDpeace

На самом деле возможно заставить это работать на более новых версиях iOS. Смотрите мой ответ: stackoverflow.com/a/62165035
Feross

7

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

дополнительно

<meta name="HandheldFriendly" content="true">

Наконец, либо в качестве атрибута стиля, либо в файле CSS, добавьте следующий текст для браузеров на основе webkit:

html {
    -webkit-text-size-adjust: none
}

Не работает на новых версиях iOS
Feross

7

Я получил это работает в iOS 12 со следующим кодом:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

С первым оператором if я гарантирую, что он будет выполняться только в средах iOS (если он выполняется в Android, прокрутка будет разбита). Также обратите внимание на passiveпараметр, установленный на false.


Не работает на моем iOS 12.3.1, вот тестовая ссылка: https://output.jsbin.com/liqiraj
Джесс

4

Это прекрасно работает в IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

спасибо @arthur и @aleclarson


iOS 13 меняет значение false на {passive: false}
wayofthefuture

4

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

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

и следующее правило для таблицы стилей CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}


Не работает на новых версиях iOS
Feross

3

иногда те другие директивы в contentтеге могут испортить лучшую догадку / эвристику Apple о том, как разметить страницу, все, что вам нужно, чтобы отключить пинч-зум, это.

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

Не работает на новых версиях iOS
Feross

2

В Safari 9.0 и более поздних версиях вы можете использовать сжатие, чтобы соответствовать метатегу области просмотра, как показано ниже

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Не работает на новых версиях iOS
Feross

0

У меня по глупости был div-обертка, ширина которой измерялась в пикселях. Другие браузеры казались достаточно умными, чтобы справиться с этим. После того, как я преобразовал ширину в процентное значение, она отлично работала и на мобильном телефоне Safari. Очень назойливый.

.page{width: 960px;}

в

.page{width:93.75%}

<div id="divPage" class="page">
</div>

0

Использование touch-actionсвойства CSS является наиболее элегантным решением. Протестировано на iOS 13.5.

Чтобы отключить жесты масштабирования и дважды нажмите, чтобы увеличить:

body {
  touch-action: pan-x pan-y;
}

Если ваше приложение также не нуждается в панорамировании , т.е. прокрутке, используйте это:

body {
  touch-action: none;
}

-3

Чтобы соответствовать требованиям доступности WAI WCAG 2.0 AA, никогда не отключайте пинч-зум. (WCAG 2.0: SC 1.4.4 Изменение размера текста уровня AA). Подробнее об этом можно прочитать здесь: Мобильная доступность: как WCAG 2.0 и другие рекомендации W3C / WAI применяются к мобильным устройствам, 2.2 Увеличение / Увеличение


13
Это не ответ .. и многие клиенты все же просят заблокировать увеличение .. поэтому я не могу принять это как общее правило

9
Увеличение доступности не является обязанностью страницы (ни какого-либо приложения в этом отношении). Операционная система несет ответственность за предоставление доступного инструмента масштабирования. В настоящее время каждая ОС предоставляет такую ​​функцию, которая применяется как масштабирование экрана , и она не должна мешать самому масштабированию страницы, поскольку она не предназначена для доступности.
Бруно Фингер

4
Для таких вещей всегда есть действительные варианты использования. По какой-то причине почти вся веб-литература предполагает, что сеть предназначена только для создания блогов. Так же, как есть допустимые сценарии использования для JavaScript eval(), есть и отключение масштабирования. Я использую его для веб-приложения, которое используется в сочетании со сканером Bluetooth, чтобы предотвратить масштабирование страницы при сканировании штрих-кода.
user128216 30.09.15

3
Я полностью согласен с целями рекомендаций по доступности, но нет никаких сомнений в том, что бывают случаи, когда масштабирование нежелательно или не нужно, или может даже нарушить работу пользователя. Плюс, вы знаете, клиенты.
Чак Ле Батт

2
Я бы сказал, что в приложении html / javascript эти рекомендации не применяются. В конце концов, родное приложение позволит вам увеличивать и уменьшать масштаб?
Йорген Сигвардссон

-5

Этот должен работать на Iphone и т. Д.

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.