1、Viewport:视口屏幕，可以操作的属性如下：
width //viewport的宽度，范围从200-10000，默认为980像素
height //viewport的高度
initial-scale //初始的缩放比，（范围从0到10）
minimum-scale //允许用户缩放到的最小比例
maximum-scale //允许用户缩放到的最大比例
user-scalable //用户是否可以手动缩放 （no , yes）
在html头部视情况添加：
// 宽度为设备屏幕宽度，缩放比为1：1，不允许用户*缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="apple-touch-fullscreen" content="yes"> //添加到主屏幕后
<meta name="apple-mobile-web-app-capable" content="yes"> //全屏显示
// 以上<meta> 的作用就是删除默认的苹果工具栏和菜单栏
//IOS中禁止将数字转为电话号码链接，Android中禁止自动识别页面中的邮件地址
<meta content="telephone=no,email=no" name="format-detection"/>
//默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
2、同事屏蔽IOS和Android下点击元素出现的阴影
-webkit-tap-highlight-color:rgba(255,255,255,0);
备注：transparent的属性值在android下无效。
3、去除Android下 a/input等元素 获得焦点时 高亮边框
a:focus,input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;}
4、link:
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
5、媒体查询：主要作用是适配不同设备的大小
//媒体类型所有媒体，屏幕宽度400px以上执行某某样式
@media all and (min-width:400px){
div{
background-color:red;
}
} //媒体类型屏幕 ，当屏幕尺寸大于600小于900px时执行的某某样式
@media screen and (min-width:600px) and (max-width:900px){
}
//也可以在引用link标签时使用
<link rel="stylesheet" type="text/css" media="all and (max-width:400px)" href="test.css">