移动web页面头部书写

HTTP 标题信息(http-equiv) 和页面描述信息(name)

http-equiv:
该枚举的属性定义，能够改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来讲便可以模拟 HTTP 协议响应头。
最多见的大概属于Content-Type了，设置编码类型。如

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

H5中能够简化为

<meta charset="utf-8">

http-equiv常见还有其它以下等（合理使用可增长 SEO 收录）。

Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过时时间
last-modified : 页面最后生成时间
expires : 设置 cache 过时时间
cache-control : 设置文档的缓存机制
...

name:
该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也能够使用浏览器厂商自定义的 meta， 如 viewport；

viewport可视区域的定义，如屏幕缩放等。

告诉浏览器如何规范的渲染网页。

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />

这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，而且文档最大的宽度比例是1.0，且不容许用户点击屏幕放大浏览；若是想设置用户能够进行缩放 user-scalable=yes;可是手机浏览器（UC）上依然没法缩放。

width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素
height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000 
initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – // float_value，容许用户缩放到的最小比例
maximum-scale – // float_value，容许用户缩放到的最大比例
user-scalable – // [yes | no] 用户是否能够手动缩放
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度

format-detection对电话号码的识别&&email对EMAIL识别

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

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="email=no" />

容许合写：

<meta name="format-detection" content="telphone=no, email=no" />

no-cache缓存控制

<meta http-equiv="Cache-Control" content="no-cache"/>

没有这句话的话，WAP 浏览器将仅仅显示缓存中的文档的复本, 而不须要每次刷新都链接服务器。某些 WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种状况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.

IOS私有属性

apple-mobile-web-app-capable 启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。

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

meta标签是iphone设备中的safari私有meta标签，它表示：容许全屏模式浏览；

apple-mobile-web-app-status-bar-style在webapp模式下，改变顶部状态条的颜色。

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

meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，default(白色，默认) | black(黑色) | black-translucent(半透明)

apple-touch-startup-image在 webapp 下，设置启动时候的界面;

<link rel="apple-touch-startup-image" href="/startup.png" />

不支持 size 属性，能够使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;

apple-touch-icon在webapp下，指定放置主屏幕上 icon 文件路径;

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；
如没有一致尺寸的图标，会优先选择比推荐尺寸大，可是最接近推荐尺寸的图标。
ios7之前系统默认会对图标添加特效（圆角及高光），若是不但愿系统添加特效，则能够用apple-touch-icon-precomposed.png代替apple-touch-icon.png

其余meta

<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

窗口大小

Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口，它的主要做用是容许开发者建立一个虚拟的窗口，并自定义其窗口的大小缩放功能。

若是开发者没有定义这个模拟窗口，移动版Safari的虚拟窗口默认大小980像素。如今，除了Safari的浏览器外，其余浏览器也支持viewPort虚拟窗口。可是，不一样的浏览器对viewport窗口的默认大小支持都不一致。

虚拟窗口（layout viewport）
移动浏览器默认状况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为 layout viewport。
宽度可经过 Js 获取(基本全部设备都支持)

document.documentElement.clientWidth
document.documentElement.clientHeight

视觉窗口（visual viewport）
浏览器可视区域大小。可理解为手机物理屏幕。
宽度可经过 Js 获取(不支持Android2, Opera Mini, UC8)

window.innerWidth
window.innerHeight

ideal viewport
由Peter-Paul Koch提出的一种概念，一个完美适配移动设备的 viewport。理想状态是不须要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。

meta viewport
移动端默认使用的是 layout viewport ，而咱们想要达到相似 ideal viewport 的效果的话，能够经过 meta 标签来对 viewport 进行控制。

web开发须知

开发触摸屏你须要触摸事件，而且hover事件失效，使用tap事件替换click事件。
关于适配不一样分辨率的屏幕，一般使用两倍像素的图片。
移动端设备对于Web Storage的支持状况比较理想。

Touch触控事件

touchstart 手指放在一个DOM元素上不放时出发事件
touchmove手指拖拽一个DOM元素时触发事件
touchend手指从一个DOM元素中移开时触发事件
除了上述的标准触摸事件外，SenchaTouch还自定义了很是多的事件，分别以下：
touchdowm 手机触摸屏幕时触发事件
dragstart 拖拽DOM元素前触发事件
drag拖拽DOM元素时触发事件
dragend 拖拽DOM元素后触发事件
singletap 和tap事件类型
tap 手指触摸屏幕并迅速的离开屏幕
doubletap手指连续两次放在DOM元素上后触发事件
taphold触摸并保持一段时间后触发事件
tapcancle触摸中断事件
swipe滑动时触发事件
pinch 手指按捏一个DOM元素时触发事件
pinchstart 手指按捏一个DOM元素以前触发事件
pinchend手指按捏一个DOM元素以后触发事件

屏幕大小适配Css文件

<link rel='stylesheet' media='screen and(max-width:600px)' href='small.css'/>

在small.css样式文件内，须要定义media类型的样式，例如：

@media screen  and (max-width:600px){
    .demo{
            background-color:#ccc;
    }
}

当屏幕可视区域的宽度长度600px和900px之间时，应用该样式文件。导入Css文件写法以下：

<link rel='stylesheet' media='screen and(min-width:600px)and(max-width:900px)'href='small.css'></link>

small.css样式文件内对应写法以下：

@media screen and（min-width:600px）and(max-width:900px){
.demo{
    ……
    }
}

当文件最大屏幕但是去为480像素时，应用该样式文件。导入CSS文件写法以下：

<link rel='stylesheet' media='screen and(max-device-width:480px)' href='small.css'></link>

small.css样式文件内对应写法以下：

@media screen and(max-device-width:480px){
    .demo{
        background-color:#ccc;
        }
}

根据方向适配文件

<link rel='stylesheet' media ='all and(orientation:portrait)' href='portrait.css'/>

<link rel='stylesheet' media='all and(orientation:landscape)' href='landscape.css'/>

媒体查询语法

@media [media_query] media_type and media_feature

使用Media Queries样式模块时都必须‘@media’方式开头。media_query表示查询关键字，在这里能够使用not关键字和only关键字。not 关键字和only关键字。not关键字表示对后面的样式表达式执行取反操做。

@media not screen  and (max-device-width:480px)

only关键字的做用是，让不支持MediaQueries 的设备但能读取 Media Type 类型的浏览器忽略这个样式。例如以下代码：

@media only screen and (max-device-width:480px)

导入Media Queries 样式文件,在首页的HTML文件的head元素内新增如下Media Queries 样式文件模块；

<link rel='stylesheet' type='text/css' media='only screen and(max-width:480px),only screen and (max-device-width)' href='/resources/style/device.css'/>

 

 

转自简书的《 移动web页面头部书写》