Geek Answers Handbook

IOS 8.3. An initial metadata scale below 1.0 results in a weird scaling of content when changing orientation

After upgrading my iOS devices to iOS 8.3, I noticed some strange behavior with the property of the original meta-definition scale. If I set the initial scale to 1.0 and rotate my device while I am on the web page, all the content will gradually decrease and, in the end, the browser will work.

I noticed that the amount of how much less content with each orientation change is related to how much you set the initial scale. For example, if I set the value to 0.9, the content will get 10% less each time. If I set it to 0.6, the content will get 40% less each time.

Due to the nature of this error, it cannot be set or tested on jsfiddle. Instead, I will insert the code right here so you can check it somewhere somewhere:

<!doctype html> <html> <head> <title>initial scale under 1.0</title> <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=0" /> </head> <body> <div id = "wrapper"> <h1>Hello, run this page on iOS 8.3 device and change the orientation multiple times to make this text go smaller and eventually crash the browser!</h1> </div> </body> </html>

You can compare this broken example with a working one, which has an initial scale set to 1.0:

 <!doctype html> <html> <head> <title>initial scale 1.0</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /> </head> <body> <div id = "wrapper"> <h1>This text will not get smaller nor will the browser crash when you rotate your device multiple times!</h1> </div> </body> </html>

Before switching to iOS 8.3, the rotation of the device worked fine. The layout cannot be reduced or deleted, nor can the browser crash after several orientation changes.

Is there any way to fix this problem?

+5
source share
1 answer

You could not reproduce the error on one of your sites in the latest version of iOS 8.3. But you could reproduce the error on some other sites.

From the comments you use jQuerymobile.

Some versions of jQuery mobile may not be compatible with some versions of iOS Safari.

We cannot completely eliminate the possible error in scaling the Safari viewport in some versions. But what can we do, we can make a workaround to solve the problem.

Here is one workaround to solve the scaling issue.

Here is the jQuery forum topic error

The following is a detailed article on how to resolve viewport errors in iPhone widgets.

It is always useful to have the latest jqueryMobile on your site, as it will probably have the fixes and workarounds jQueryMobile encounters in newer versions of the browser.

Hope this helps.

Feel free to comment on any doubts.

+1
source

More articles:


All Articles