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'/>