移动web开发，html头部规范

来源：互联网发布：黑帽seo 流量劫持编辑：程序博客网时间：2024/05/21 07:56

随着智能手机的普及，越来越多的用户从PC端向移动端转移，移动端的市场争夺也日趋白热化。那么在移动端的前端开发中，我们应该遵从那些规范和标准呢？今天我给大家带来的是移动端网站开发的html头部规范及总结……

注：红色标出的是必须要有的，绿色为非必须的

1、文档类型声明及编码：统一为html5声明类型<!DOCTYPE html>；

2、编码统一为<meta charset="utf-8" />, 书写时利用实现层次分明的缩进。

3、<meta name="viewport" content="..." /> 设备屏幕大小的自适应问题。width 为 viewport的宽度；height 为 viewport的高度；initial-scale 为初始的缩放比例；minimum-scale允许用户缩放到的最小比例；maximum-scale 允许用户缩放到的最大比例；user-scalable用户是否可以手动缩放。如：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

4、<meta http-equiv="X-UA-Compatible"content="chrome=1"> 用以声明当前页面用chrome内核来渲染。

5、<meta http-equiv="Cache-Control" content="max-age=0" /> 指定请求和响应遵循的缓存机制。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、 only-if-cached（具体设置请Google之）。这里使用的max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应，当其值为0时，与<meta http-equiv="Cache-Control" content="no-cache"/>作用相同。

6、<meta name="MobileOptimized" content="240"/> 阻止浏览器自动调整图片大小。

7、<meta name="apple-touch-fullscreen" content="yes" /> 在IOS系统中隐藏工具栏。

8、<meta name="apple-mobile-web-app-capable" content="yes" /> 网站开启对web app程序的支持。

9、<link rel=”apple-touch-icon” href=”images/icon.png” /> 设置web app的放置主屏幕上icon文件路径。（注：rel还可设置为"apple-touch-icon-precomposed"，与前者的区别只在于前者会增加高光效果，后者为原图效果。）

10、<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 隐藏状态栏。

11、<meta name="format-detection" content="telephone=no" /> 使设备浏览网页时对数字不启用电话功能，telephone=yes则启用。

12、<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 指定的iphone中safari顶端的状态条的样式。

13、<meta name="Author" contect="Mr.Yi" /> 设置开发者名字。

14、<link rel="apple-touch-startup-image" href="startup.png" /> 设置开始页面图片。

<a href="http://www.rankbill.com/wp-content/uploads/2013/09/html_2.jpg" class="cboxElement" rel="example4" 111"="" style="color: rgb(105, 105, 105); outline-width: 0px; outline-style: initial; outline-color: initial; "> html_2