一:在移动开发的页面里中常常会出现以下这样的代码,这里总结一下这样写的意义和作用:
1.该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放,以防手机页面下方出现滚动条。
initial-scale:设置页面的初始缩放值,为一个数字,可以带小数;
minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数;
maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数。
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
2.width=device-width,把当前的viewport宽度变成ideal viewport的宽度
<meta name="viewport" content="width=device-width, initial-scale=1">
3 . telephone=no禁止了把数字转化为拨号链接,默认为yes开启
<meta name="format-detection" content="telephone=no" />
4 . 这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
<meta name="apple-mobile-web-app-capable" content="yes" />
5 .控制状态栏显示样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
6 . 用CSS来控制字体缩放
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
二:动态改变meta viewport标签的两种方法:
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
<!--注释:使用document.write来动态输出meta viewport标签;-->
<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>
<!-- 注释:通过setAttribute来改变 -->