HTML5移动端head部分的充电
2015-12-29 阅读 406
#### 页面视窗的设置
```HTML
<meta name="viewport" content=""/>content的几个属性：
width viewport的宽度：[device-width | pixel_value] (width如果直接设置为pixel_width数值，大部分的安卓手机不支持，IOS支持);
height viewport的高度：（范围从223到10,000）
user-scalable： [yes | no]是否允许缩放
initial-scale： [数值]初始化比例（范围从 > 0 到 10）
minimum-scale： [数值]允许缩放的最小比例
maximun-scale： [数值]允许缩放的最大比例
target-densitydpi: 值有以下（一般推荐设置中等响度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
--dpi_value:一般是70--400//没有英寸像素点的个数
--device-dpi设备默认像素密度
--high-dpi高度像素密度
--medium-dpi中等像素密度
--low-dpi低像素密度
```
一般使用案例
```HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
```
#### 忽略电话号码和邮箱
```HTML
<meta name="format-detection" content="teltphone=no">
<!--说明：忽略页面中的数字识别为电话号码-->
<meta name="format-detection" content="email=no">
<!--说明：忽略页面中得邮箱格式为邮箱-->
```
#### 设置作者姓名及联系方式
```HTML
<meta name="author" content="name,XXX@163.com">
```
#### 较常用的
```HTML
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!--开启对web app程序的支持-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--改变顶部状态条的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--设置“添加到主屏幕图标-->
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> <!-- iOS 图标 end -->
<!--设置桌面图标的标题-->
<meta name="apple-mobile-web-app-title" content="标题">
```
#### 设置启动画面
当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：
```HTML
<link rel="apple-touch-startup-image" href="startup.png" />
```
根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同所以：
```HTML
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
```
更新于 2023年03月28日
赞 580
