viewport 学习
(一)viewport概念
(1)viewport写法
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" http-equiv="Content-Type" charset="utf-8"/>
(2)layout viewport
ppk认为浏览器默认的viewport叫做 layout viewport。
这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
(3)layout viewport
layout viewport的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,
ppk把这个viewport叫做 visual viewport。
visual viewport的宽度可以通过window.innerWidth 来获取,但在Android 2, Oprea mini 和 UC 8中无法正确获取。
(4)ideal viewport
ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。
(5)利用meta标签对viewport进行控制
在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:
width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。
(6)把当前的viewport宽度设置为 ideal viewport 的宽度
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。
因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为width-device这个特殊的值就行了。
<meta name="viewport" content="width=device-width">
(7)关于缩放问题
visual viewport宽度 = ideal viewport宽度 / 当前缩放值
当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。
(二)动态改变meta viewport标签
第一种方法
可以使用document.write来动态输出meta viewport标签,例如:
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
第二种方法
通过setAttribute来改变
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
这里证明,html任何一个标签都能使用id作为选择器。
安卓2.3自带浏览器上的一个bug
复制代码
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出600,正常情况应该弹出320
</script>
<meta name="viewport" content="width=600">
<script type="text/javascript">
alert(document.documentElement.clientWidth); //弹出320,正常情况应该弹出600
</script>
复制代码
测试的手机ideal viewport 宽度为320px,第一次弹出的值是600,但这个值应该是第行meta标签的结果啊,
然后第二次弹出的值是320,这才是第一行meta标签所达到的效果啊,所以在安卓2.3(或许是所有2.x版本中)的自带浏览器中,
对meta viewport标签进行覆盖或更改,会出现让人非常迷糊的结果
原文:http://www.cnblogs.com/2050/p/3877280.html
附一段 viewport 初始化代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ( function () { var win = window, doc = win.document, docEl = doc.documentElement, ua = win.navigator.userAgent, metaA = docEl.querySelector( 'meta[name="viewport"]' ), isIOS = ua.match(/iphone/gi), scale, dpr; if (isIOS) { dpr = win.devicePixelRatio; dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1; scale = (1 / dpr).toFixed(2); docEl.setAttribute( 'data-dpr' , dpr); docEl.setAttribute( 'ios' , 'true' ); if (!metaA) { metaA = doc.createElement( 'meta' ); } metaA.setAttribute( 'name' , 'viewport' ); metaA.setAttribute( 'content' , 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' ); if (!metaA) { if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaA); } else { var div = doc.createElement( "div" ); div.appendChild(metaA); doc.write(div.innerHTML); } } win.dpr = dpr; } })(); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步