JS - Safari на iOS - Как получить свойство масштаба окна просмотра - PullRequest
Новая
       35

JS - Safari на iOS - Как получить свойство масштаба окна просмотра

3 голосов
/ 15 октября 2019

В Chrome я могу получить масштаб окна просмотра, посмотрев на window.visualViewport.scale, который доступен в Safari, однако кажется, что window.visualViewport не определен в более старых версиях Safari на iOS .

Есть ли обходной путь?

Ответы [ 2 ]

4 голосов
/ 21 октября 2019

Во-первых, вам нужно получить ширину области просмотра, используя clientWidth или innerWidth 

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

Затем вам нужно получить фактическую ширину экрана 

var screenWidth = window.screen.width

Тогда масштаб области просмотра у вас на руках 

var viewportScale = screenWidth / viewportWidth
1 голос
/ 20 октября 2019

Согласно caniuse.com visualViewport.scale должен быть доступен в Safari для iOS с версии 13.0, выпущенной 19 сентября 2019 года. Вы уже обновились?

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

ЕслиВы действительно будете в отчаянии, вы можете попытаться «изобрести какой-нибудь велосипед». Например (только концепция): создайте и измерьте 2 <div> прямо внутри <body>. Один из них width: 100vw;, а другой width: 100%; (это на самом деле не нужно, поскольку блоки уже будут иметь ширину родительского блока на 100%). Трюк здесь будет в разных единицах. 100vw должно всегда быть 100% области просмотра, когда 100% должно растягиваться для максимальной доступной ширины. Измерьте разницу между этими двумя блоками, и вы можете рассчитать масштаб. Имейте в виду эти хитрые поля и, возможно, ландшафт.

...