移动手机开发meta注意问题

一：在移动开发的页面里中常常会出现以下这样的代码，这里总结一下这样写的意义和作用：

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来改变 -->