一.head里加入下面这元标签,让网页的宽度自动适应手机屏幕的宽度。
其中 width:控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
二、默认情况下,设备会自动识别任何可能是电话号码的字符串,设置上面这段代码是让设备忽略数字自动识别为电话号码。
<meta name="format-detection" content="telephone=no"/>
三、去除Android平台中对邮箱地址的识别
<meta content="email=no" name="format-detection" />
四、启用 WebApp 全屏模式,是把此页面添加到主屏幕后,从主屏幕打开才会起作用,加上这句话后浏览器栏会消失。
<meta name="apple-mobile-web-app-capable" content="yes">
五、(下面这个也必须是添加到主屏幕后能够看到的效果)
在web app应用下状态条(屏幕顶部条)的颜色; 默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
注意:若值为“black-translucent”将会占据页面px位置,浮在页面上方(会覆盖页面40px高度–iphone4以上Retina屏幕为40px)。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
六、添加到主屏后的标题,点击添加到主屏幕按钮后显示的标题。
<meta name="apple-mobile-web-app-title" content="标题">