The problem of scaling iOS on a high-speed site in terms of portraiture and landscape

Question

So, I had a strange problem with my responsive websites when switching from portrait to landscape mode on my iOS device. You can see the live site here: http://www.aptify.com

If you are viewing the site in portrait mode, then rotate the iOS device that it enlarged.

I currently have the following meta:

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

I found one question similar to this: Media queries - The iPhone’s landscape mode is too oversized , but the question has never been answered correctly. The only answer mentioned using something similar to my tag above, but it was only: <meta name="viewport" content="width=device-width" /> without initial-scale=1.0 - does it matter?

I would also like to note that this does not happen on Android devices, only on iOS devices.

Has anyone got and fixed this issue before?

Thank you for your help!

Answer 1

I have included a link in the notes to help in this situation. Another way to fix this is to use the code described in Jeremy Kate's “Orientation and Scale” article .

 <script type="text/javascript"> var metas = document.getElementsByTagName('meta'); var i; if (navigator.userAgent.match(/iPhone/i)) { for (i=0; i<metas.length; i++) { if (metas[i].name == "viewport") { metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0"; } } document.addEventListener("gesturestart", gestureStart, false); } function gestureStart() { for (i=0; i<metas.length; i++) { if (metas[i].name == "viewport") { metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6"; } } } </script> 

If you want to ignore the rights of your users and not allow them to zoom in on their devices, you can also set the meta-view window to the next one, which will solve the problem.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />