Viewport Metatag(第1部分移动网络)
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
更多的乐趣与视窗标签
除了解决我们最大的问题与内容的宽度,玩的视窗标签有了更多的选择:
|
财产
|
描述
|
|
宽度
|
视窗的宽度像素(或设备宽度)。 如果宽度不设置,默认为一个桌面大小(mobile Safari上980 px)。
|
|
高度
|
高像素的窗口(或device-height)。 通常你不需要担心设置这个属性。
|
|
初始大小
|
(0到10.0)乘数,页面后最初显示的规模。 安全的赌注:如果你需要设置它,将其设置为1.0。 大值=放大,小值=放大
|
|
最小范围
|
(0到10.0)最低乘数用户可以“缩小”。 默认为0.25移动Safari。
|
|
最大范围
|
(0到10.0)最低乘数用户可以“放大”。 默认为1.6移动Safari。
|
|
user-scalable
|
(是/否)是否允许用户扩展/(放大/缩小)。 mobile Safari的默认为“是”。
|
功能手机:当视窗不可用…
不幸的是,视窗标签是相对较新,因此不是普遍支持,特别是如果你在老的功能手机。 但也有一些旧方法在处理识别你的网站优化的移动:
1
|
<meta name="HandheldFriendly" content="true"/>
|
这个标签最初是用来识别移动内容AvantGo浏览器,但现在已经被识别的一般标准的移动网站。 然而,它的未知的浏览器都支持这个meta标记。
另一个标记在你的处置是Windows-proprietary meta标记,也生根并最终成为用作识别移动内容的另一个手段。 这个标签的缺点是,必须给出一个具体的宽度,这并不能让它一样灵活的视窗标签(见上图)。 再一次,这是未知的支持这个标签是什么:
1
|
<meta name="MobileOptimized" content="320"/>
|
最后,你的网站将会被识别为一个移动优化网站如果你的doctype xhtml mp或WML。 然而,这种情况已经越来越少了这些天,当浏览器开始支持美好HTML4.01和HTML5 +。
自定义Android属性
安卓官方文档列出了他们特殊的属性添加到meta标签:target-densitydpi。 这个属性本质上允许开发人员指定哪个屏幕分辨率页面已经发达了,或者更确切地说如何处理媒体如图像的缩放。
标签的一个例子:
1
|
<meta name="viewport" content="target-densitydpi=device-dpi" />
|
|
