Skip to content

Instantly share code, notes, and snippets.

@ufologist

ufologist/ios6-viewport-scale-bug-fix.html

Last active November 11, 2015 08:10
Show Gist options
  • Save ufologist/de7926089d3c1b3c7570 to your computer and use it in GitHub Desktop.
Save ufologist/de7926089d3c1b3c7570 to your computer and use it in GitHub Desktop.
Download ZIP
Fix iPhone4/iOS6 browser viewport appear black or white area bug!!
Raw
ios6-viewport-scale-bug-fix.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fix iPhone4/iOS6 browser viewport appear black or white area bug!!</title>
<!--
关键是要注意在初始化页面时设置 viewport width=320.1, 非常之诡异!
PS: 在查了N多资料, N多尝试后发现, 其实只要不将width设置成320或device-width即可, 其他任何数字都可以! 不设置width这个属性也可以!
然而我们最常用的就是 width=device-width, 被 iOS6 坑了啊!
Web apps can be letterboxed, but only if their viewport’s width is set to either device-width or 320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0.
-->
<meta id="viewport" name="viewport" content="width=320.1,initial-scale=1,user-scalable=no">
</head>
<body class="body-viewport">
<h1>Fix iPhone4/iOS6 browser viewport appear black or white area bug!!</h1>
<p>click to show fix the bug</p>
<button onclick="changeViewport()">change viewport initial-scale 1 -&gt; 0.5</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><a href="ios6-viewport-scale-bug.html">iPhone4/iOS6 browser viewport appear black or white area bug!!</a></li>
<li><a href="ios6-viewport-scale-bug">如何解决因修改 viewport 而出现的一片黑色或白色区域</a></li>
</ul>
<script>
function changeViewport() {
// 在改变initial-scale时, 下面这2句都能够达到正常的效果, 解决这个非常非常讨厌调皮的bug!!!
// document.getElementById('viewport').content = 'width=320,initial-scale=0.5,user-scalable=no';
document.getElementById('viewport').content = 'width=device-width,initial-scale=0.5,user-scalable=no';
}
</script>
</body>
</html>
Raw
ios6-viewport-scale-bug.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iPhone4/iOS6 browser viewport appear black or white area bug!!</title>
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body class="body-viewport">
<h1>iPhone4/iOS6 browser viewport appear black or white area bug!!</h1>
<p>click to show the bug</p>
<button onclick="changeViewport()">change viewport initial-scale 1 -&gt; 0.5</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><a href="ios6-viewport-scale-bug-fix.html">Fix iPhone4/iOS6 browser viewport appear black or white area bug!!</a></li>
<li><a href="ios6-viewport-scale-bug">如何解决因修改 viewport 而出现的一片黑色或白色区域</a></li>
</ul>
<script>
function changeViewport() {
document.getElementById('viewport').content = 'width=device-width,initial-scale=0.5,user-scalable=no';
}
</script>
</body>
</html>
Raw
ios6-viewport-scale-bug.md

如何解决因修改 viewport 而出现的一片黑色或白色区域

Bug: iPhone4/iOS6 动态修改 viewport 后浏览器右侧/底部会出现一片黑色或白色区域

同时测试过 iPhone4/iOS7 没有这个bug, 应该可以认定是 iOS6 才会有这个bug.

重现bug

当初始化页面时设置 viewport initial-scale=1, 之后再动态修改为 initial-scale=小于1的数值, 即对页面的 viewport 进行缩小操作.

例如初始化时 viewport 如下:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

再通过 JavaScript 动态修改为:

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=no">

duangduang

ios6 viewport scale bug

解决bug

关键是要注意在初始化页面时设置 viewport width=320.1, 非常之诡异!

PS: 在查了N多资料, N多尝试后发现, 其实只要不将width设置成320或device-width即可, 其他任何数字都可以! 不设置width这个属性也可以!

然而我们最常用的就是 width=device-width, 被 iOS6 坑了啊!

Web apps can be letterboxed, but only if their viewport’s width is set to either device-width or 320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0.

示例

修改过bug后, 页面终于正常了!

duangduang

修复 ios6 viewport scale bug

参考

@ufologist
Copy link
Author

bug出现时的样子
scene-ios6-viewport-scale-bug

ios6-viewport-scale-bug-fix

解决bug后, 显示正常
ios6-viewport-scale-bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment