iOS 8.3 - 1.0以下的元视口初始缩放比例会导致方向更改时出现奇怪的内容缩放 [英] iOS 8.3 - Meta viewport initial scale under 1.0 results in weird content scaling on orientation change
问题描述
我注意到了内容在每次方向变化时会变得多小的量与您设置初始缩放比例有关。例如，如果我将它设置为0.9，则内容每次都会减小10％。如果我将它设置为0.6，那么内容会每次减少40％。
由于这个bug的性质，它不能在jsfiddle中放置或体验。相反，我会在这里粘贴代码，以便您可以在某处测试它：
<！doctype html>
< html>
< head>
< title>初始缩放比例小于1.0< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 0.7，user-scalable = 0/>
< / head>
< body>
< div id =wrapper>
< h1>您好，在iOS 8.3设备上运行此页面并多次更改方向，以使此文本变小并最终导致浏览器崩溃！< / h1>
< / div>
< / body>
< / html>
您可以比较这个破损的示例与初始缩放设置为1.0的工作示例：
<！doctype html>
< html>
< head>
< title>初始缩放比例1.0< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，user-scalable = 0/>
< / head>
< body>
< div id =wrapper>
< h1>当您多次旋转您的设备时，这段文字不会变小，浏览器也不会崩溃！< / h1>
< / div>
< / body>
< / html>
在升级到iOS 8.3之前，设备旋转工作得很好。该布局既不会缩小，也不会在多方向更改后崩溃。
有没有办法解决这个问题？
在最新的iOS 8.3
中，您无法在其中一个站点中重现该错误但您仍然可以在其他某些站点
从您使用jQuerymobile的评论
一些版本的 jQuery mobile
em>可以是 incompatbile 与一些版本的 iOS Safari 。我们不能完全排除<但是我们可以做些什么，我们可以做一个解决方法来解决这个问题。
这是一个解决方法来处理缩放问题。
这是一个错误 jQuery论坛中遵循noreferrer> topic
以下是详细的关于如何解决 iPhone视口缩放bug的文章 em>。
在您的网站 最后总是明智的，因为它可能是将有jQueryMobile在较新版本的浏览器中遇到的修补程序和变通方法。
希望这有助于您。
随意评论任何疑虑。
After upgrading my iOS devices to iOS 8.3 I noticed some weird behavior with the meta viewport initial scale property. If I set the initial scale under 1.0 and rotate my device while I am on a webpage, the whole content will get progressively smaller and eventually the browser will crash.
I noticed that the amount of how much smaller the content gets with each orientation change is linked to how much you set the initial scale. For example if I set it to 0.9, the content will get 10% smaller every time. If I set it to 0.6, the content will get 40% smaller every time.
Due to the nature of this bug, it cannot be put or experienced on jsfiddle. Instead I will paste the code right here so you can test it yourself 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 that broken example with a working one, which has the 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 upgrading to iOS 8.3 the device rotation worked just fine. The layout neither get zoomed out or in nor did the browser crash after multiple orientation changes.
Is there a way to fix this issue?
You couldn't reproduce the bug in one of your sites in the latest iOS 8.3 But you could still reproduce the bug in some of your other sites.
From the comments you are using jQuerymobile.
some versions of jQuery mobile can be incompatbile with some versions of iOS Safari.
We can't completely rule out the possible bug in safari viewport scaling in some versions.But what we can do we can do a workaround to solve the problem.
Here is a one of the workaround to deal with scaling problem.
Here is a bug topic in jQuery forum
Here is a detailed article on how to solve the iPhone viewport scale bug.
It is always wise to have the latest jqueryMobile in your site as it possibly will have the fixes and workarounds that jQueryMobile encounters in the newer versions of browser.
Hope this helps.
Feel free to comment for any doubts.
这篇关于iOS 8.3 - 1.0以下的元视口初始缩放比例会导致方向更改时出现奇怪的内容缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
