Что именно делает iOS 13 Safari AA zoom? - PullRequest
0 голосов
/ 01 февраля 2020

На iPhone IOS 13 и iPadOS, Safari имеет накладной «AA» слева от веб-адресной строки.

Нажатие на него позволяет пользователю увеличивать или уменьшать размер текста и других элементов. .

Если бы мы решили, что наш сайт действительно выглядит лучше на 115% на iPhone и iPad после игры с этой функцией AA, что нам нужно сделать с нашими существующими CSS и HTML?

Мы попробовали неподдерживаемое CSS:

zoom:115%; 

на теле, HTML и (теле, html), но ничего не сделали, пока не достигли 120%, и даже тогда размеры шрифта остались прежними.

Что именно делает функциональность iOS AA технически, чтобы мы могли имитировать c? Я спросил кого-то на Medium, доступна ли эта функция программно, но он ответил нет.

ОБНОВЛЕНИЕ 1:

На основании первого комментария ниже я использовал:

<meta name="viewport" content="initial-scale=1.15, user-scalable=no, maximum-scale=1.15, viewport-fit=cover" />

и он работал на iOS iPad Safari. Мне действительно пришлось удалить:

width=device-width

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

Firefox Windows Рабочий стол по какой-то причине не работал.

А также, когда я повернул iPad в книжную ориентацию, элементы страницы на самом деле выглядели меньше, чем тогда, когда начальный масштаб и максимальный масштаб изначально были установлены на 1. Может быть на 15% меньше. Когда я повернул его обратно в ландшафт, предметы были на 1,15% больше, чем оригинал (например, мета-тег выше, похоже, работал для этого).

1 Ответ

2 голосов
/ 09 февраля 2020

FWIW: Я думаю, что это как-то связано с window.devicePixelRatio, по крайней мере, это то, что значение изменяется в браузерах настольных компьютеров (путем ввода вышеупомянутого в консоли), когда вы используете функцию увеличения / уменьшения масштаба браузера.

Не уверен, как установить это значение программно, хотя. Как ни странно, при использовании функции масштабирования Aa на iOS и проверке с помощью Safari > Develop > iPhone на Ma c, ввод window.devicePixelRatio всегда, кажется, возвращает 2.

Это также может стоить изучить, если оно не было правильно настроено: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

...