webApp开发基础之META标签详解_蓝戒的博客


webApp开发基础之META标签详解

屏幕的缩放及初始大小
添加到主屏幕全屏,图标等
苹果设备默认的工具栏和菜单栏
苹果设备状态栏样式
苹果设备自动识别电话、邮箱相关

屏幕的缩放及初始大小

<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)

添加到主屏幕全屏,图标等

&lt;meta name="apple-touch-fullscreen" content="yes"&gt;

添加到主屏幕之后,再次打开会全屏,这个不用多解释, 试试就知道了

&lt;link rel="apple-touch-icon-precomposed" href="http://***.com/iphone1.png"/&gt;

说明:这个link就是设置web app的放置主屏幕上icon文件路径。
图片尺寸可以设定为57*57(px)
或者Retina可以定为114*114(px),
ipad尺寸为72*72(px)

&lt;link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /&gt;
&lt;link rel="apple-touch-icon-precomposed"href="/static/images/identity/HTML5_Badge_64.png" /&gt;

iOS用rel="apple-touch-icon",

android 用rel="apple-touch-icon-precomposed"。

这样就能在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标。

苹果设备默认的工具栏和菜单栏

<meta name="apple-touch-fullscreen" content="yes">

 苹果设备状态栏样式这meta的作用就是删除默认的苹果工具栏和菜单栏。
content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

&lt;meta name="apple-mobile-web-app-status-bar-style" content=black" /&gt;

默认值为default(白色),

可以定为black(黑色),

black-translucent(灰色半透明)。

注意:若值为"black-translucent"将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"&gt;

在iOS中有两个meta值,apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style,这两个会让网页内容以应用程序风格显示,并使状态栏透明。

苹果设备自动识别电话、邮箱相关

&lt;meta content="telephone=no" name="format-detection" /&gt;
&lt;meta content="email=no" name="format-detection" /&gt;

将不识别邮箱告诉设备忽略将页面中的数字识别为电话号码

点击查看相关:移动web开发头部meta标签5种实用方法

本文为秋伟光原创,转载请注明出处及作者,原文地址:http://waynerQiu.com/8/222.html

本文固定链接: http://www.webzsky.com/?p=409 | 蓝戒的博客

cywcd
该日志由 cywcd 于2015年04月11日发表在 html5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: webApp开发基础之META标签详解 | 蓝戒的博客

webApp开发基础之META标签详解:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×