Consider the following snippet that should prevent zooming in and out on mobile devices
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
For ios 10 it no longer prevents zoom because of accessibility issues. So is the 300ms delay before firing click event back for ios 10? I check it for my website and it doesn't feel like there is performance downgrade. or is there?
Has Apple found a work around for this issue?
Related
Perhaps similar to this question, although not related to rotation:
unintended zoom on orientation change in PWA but not mobile safari iOS
I have an issue where if my PWA app is left running (say, on an iPad as a Kiosk) and the device sleeps / locks, upon unlocking / waking the app decides to zoom-in to a section in the middle of the page. It's not even a smooth zoom-in, it's like a badly animated 90s JPG loading checkerboard sequence as it 'switches' from one zoom level to another.
I've tried HTML meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">
I've tried CSS touch-action:
touch-action: none;
But nothing seems to stop it. Interestingly, with the app running in the Mobile Safari browser and not as a PWA, the issue does not occur.
Mobile Safari is making some fonts bigger when I am rotating the phone.
That's is driving me crazy and I can't get rid of this behavior.
Read about -webkit-text-adjust-size and tried it with all possible combinations but it doesn't seem to work. Is there anything new added in iOS9?
Have you tried the META Viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
Really hoping you can help me with this strange bug. Ever since updating my phone to iOS 9 my website: https://verweij-juristen.nl seems to be locked. When people visit my site they can't navigate. Also the footer crosses wright through my mobile slider. Even when I turn slider off it still shows and the website still hangs.
It's only on iOS 9 :(
Looking forward to any input :) I'm desperate lol.
iOS9 messes up with the viewport meta, you have to tell it to scale your site maximum at initial scale which should be 1.0
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,shrink-to-fit=no"/>
This is a meta configuration that works with iOS9
I was struggling with having 2 finger events on touch devices.Finally I removed all the meta tags from my Html and it made the Android device to work , however I still have problem with iPad.
I read all the other threads about zoom in and tried different variation of this meta tag :
<meta name="viewport" content="
user-scalable=yes,
width=device-width,
initial-scale=1.0, maximum-scale=3.0, minimum-scale=0"/>
but none of them helped have scroll on iPad.
when I have this :
<meta name="viewport" content="user-scalable=yes" />
I get zoom on Android but still no 2 finger pinch or scroll on iPad.
I appreciate any help or suggestion on that.
Is there any way to prevent the application from zooming? My app has this annoying habit of zooming all way in when you focus on a text input (only on Android, using an HTC amaze).
Sure:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>