<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 +。
安卓官方文档列出了他们特殊的属性添加到meta标签:target-densitydpi。 这个属性本质上允许开发人员指定哪个屏幕分辨率页面已经发达了,或者更确切地说如何处理媒体如图像的缩放。
标签的一个例子:
1 | <meta name="viewport" content="target-densitydpi=device-dpi" /> |
联系客服