Menu
On Chrome, I can get the viewport scale by looking at window.visualViewport.scale it is available on Safari, however, it seems that window.visualViewport is not defined on older versions of Safari on iOS.
Is there any workaround?
620
Firstly, you need to get viewport width by using clientWidth or innerWidth
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
Then, you need to get actual screen width
var screenWidth = window.screen.width
Then, viewport scale is on your hand
var viewportScale = screenWidth / viewportWidth
According to caniuse.com visualViewport.scale should be available in Safari for iOS from version 13.0 which was released 19 September 2019. Have you updated yet?
If you really need to support older Safari for iOS, and also if you have no need to measure scale right at the page load, you can try to catch touch events and guess/calculate scale by yourself.
If you're going to really desperate, you can try to "invent some bicycle". For example (just the concept): create and measure 2 <div> right inside <body>. One of them width: 100vw; and another width: 100%; (this actually isn't needed since blocks already will be 100% width of parent block). The trick here would be in different units. 100vw should be always 100% of the viewport, when 100% should stretch for maximum available width. Measure the difference between those 2 blocks and you can calculate scale. Be aware of those tricky margins/paddings and maybe of the landscape.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
