Piw*_*oli 5 html mobile viewport ios web
将我的iOS设备升级到iOS 8.3后,我注意到了meta视口初始缩放属性的一些奇怪行为.如果我将初始比例设置为1.0并在我在网页上时旋转我的设备,整个内容将逐渐变小,最终浏览器将崩溃.
我注意到,每次方向更改后内容的缩小量与您设置初始比例的程度有关.例如,如果我将其设置为0.9,则每次内容将减少10%.如果我将其设置为0.6,则每次内容将减少40%.
由于这个bug的性质,它不能在jsfiddle上放置或体验.相反,我会将代码粘贴到此处,以便您可以在某处自行测试:
<!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>
您可以将该破坏的示例与工作的示例进行比较,该示例的初始比例设置为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>
在升级到iOS 8.3之前,设备旋转工作正常.布局既不会缩小,也不会在多个方向更改后浏览器崩溃.
有没有办法解决这个问题？
您无法在最新的 iOS 8.3 中的某个网站中重现该错误，但您仍然可以在其他一些网站中重现该错误。
从评论来看，您正在使用 jQuerymobile。
某些版本的jQuery mobile可能与某些版本的iOS Safari不兼容。
我们不能完全排除某些版本中safari 视口缩放中可能存在的错误。但是我们可以采取解决方法来解决该问题。
这是处理缩放问题的解决方法之一。
这是jQuery 论坛中的一个错误主题
这里有一篇关于如何解决iPhone 视口缩放 bug 的详细文章。
在您的站点中安装最新的 jqueryMobile总是明智的，因为它可能包含 jQueryMobile 在较新版本的浏览器中遇到的修复和解决方法。
希望这可以帮助。
如有任何疑问，请随时发表评论。