It appears that when I access my website via the iPad (the newest gen) it loads the responsive site correctly starting in landscape mode. When I switch to portrait, I can see that the site adjusts properly and it also looks fine. It's when I switch back to landscape again that the site appears to zoom in a bit and needs to be zoomed out.
I have the following code in the page to try to combat this, but it still occurs...
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Any help is much appreciated!
What has most likely happened is you may have accidentally enabled the zoom feature by double tapping it with 3 fingers. To fix this issue, simply double-tap on the screen with 3 fingers, and the screen will usually go back to normal and eliminate the magnification.
Answer: A: Double-tap the screen with three fingers to switch off the zoom function, then disable it from Settings > General > Accessibility.
Navigate through your iPad using three fingers and head to the settings. If you are on iOS 16 or later versions, head to 'Settings > Accessibility > Zoom'. On iOS 12 or earlier versions go to the 'Settings > General > Accessibility > Zoom'. Turn off the zoom mode.
Seems it can be fixed by removing the initial-scale property, or alternatively by JS
Look here: Responsive site is zoomed in when flipping between Portrait and Landscape on iPad/iPhone
here: iOS zooming issue on responsive site from portrait to landscape break points
and here: http://opensourcehacker.com/2012/01/09/zoom-on-orientation-change-fix-for-mobile-browsers-mobilizing-websites-with-responsive-design-and-html5-part-8/
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