Webapp development html5 meta 常用属性说明

在开发html5app的时候, 会经常遇到的一个问题, 比如莫名其妙的电话号码变成了红色的, 但是自己并没有设置过, 是不是很苦恼, 现在就来解决写个困扰.

viewport

viewport 也就是可视区域, 对于桌面浏览器, 我们都很清楚viewport是什么, 就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,
这是真正有效的区域. 由于移动设备屏幕宽度不同于传统web, 因此我们需要改变viewport.

一、参数说明

1. width // viewport 的宽度 （范围从200 到10,000，默认为980 像素）
2. height // viewport 的高度 （范围从223 到10,000）
3. initial-scale // 初始的缩放比例 （范围从>0到10）
4. minimum-scale // 允许用户缩放到的最小比例
5. maximum-scale // 允许用户缩放到的最大比例
6. user-scalable // 用户是否可以手动缩 (no, yes)

二、示例
实际会用到的就是个参数

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

文件编码

用于设置文本编码的, 很多乱码问题都是这个导致. 需要把你的文本编码和你

一、参数说明

1. text/html // 文本类型
2. charset // 文本编码

二、示例

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

顶端的状态条的样式

系统状态栏是 iOS 顶部显示运营商、WIFI、时间的部分的颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black">

隐藏状态栏

<meta name="apple-mobile-web-app-capable" content="yes">

忽略电话号码

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

<meta content="telephone=no" name="format-detection">

参考资料

webkit webApp 开发技术要点总结