web app中meta学习

来源：互联网发布：suse linux ssh 编辑：程序博客网时间：2024/05/24 06:09

一.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="标题"＞

0 0