屏幕的缩放及初始大小
添加到主屏幕全屏,图标等
苹果设备默认的工具栏和菜单栏
苹果设备状态栏样式
苹果设备自动识别电话、邮箱相关
屏幕的缩放及初始大小
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
viewport
屏幕可见区域(除了工具栏乱七八糟的东西),可设置的值有一下几个:
target-densitydpi
代表设备的分辨率,目前只有android支持此属性,取值范围有:
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间
width
viewport 的宽度 （范围从200 到10,000，默认为980 像素）,
一般我们都让页面宽度和设备宽度相同:
width=device-width
height
viewport 的高度 （范围从223 到10,000）
initial-scale
初始的缩放比例 （范围从>0 到10）,一般都是1
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
注意当上面两个值都为1是代表不允许屏幕放大缩小,但有一小部分手机对这个无视,解决办法就是在样式表用最小宽度来限制
body{min-width: 300px;}
user-scalable - 用户是否可以手动缩 (no,yes)
添加到主屏幕全屏,图标等
<meta name="apple-touch-fullscreen" content="yes">
添加到主屏幕之后,再次打开会全屏,这个不用多解释, 试试就知道了
<link rel="apple-touch-icon-precomposed" href="http://***.com/iphone1.png"/>
说明:这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57（px）
或者Retina可以定为114*114（px），
ipad尺寸为72*72（px）
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> <link rel="apple-touch-icon-precomposed"href="/static/images/identity/HTML5_Badge_64.png" />
iOS用rel="apple-touch-icon",
android 用rel="apple-touch-icon-precomposed"。
这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。
苹果设备默认的工具栏和菜单栏
<meta name="apple-touch-fullscreen" content="yes">
苹果设备状态栏样式这meta的作用就是删除默认的苹果工具栏和菜单栏。
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
<meta name="apple-mobile-web-app-status-bar-style" content=black" />
默认值为default（白色），
可以定为black（黑色）,
black-translucent（灰色半透明）。
注意：若值为"black-translucent"将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。
苹果设备自动识别电话、邮箱相关
<meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" />
将不识别邮箱告诉设备忽略将页面中的数字识别为电话号码
本文为秋伟光原创,转载请注明出处及作者,原文地址:http://waynerQiu.com/8/222.html
文章评论