1、Viewport:视口屏幕，可以操作的属性如下：

width    //viewport的宽度，范围从200-10000，默认为980像素height    //viewport的高度initial-scale    //初始的缩放比，（范围从0到10）minimum-scale    //允许用户缩放到的最小比例maximum-scale    //允许用户缩放到的最大比例user-scalable      //用户是否可以手动缩放 （no , yes）

在html头部视情况添加：

// 宽度为设备屏幕宽度，缩放比为1：1，不允许用户自由缩放 
      
       //添加到主屏幕后
         //全屏显示// 以上
      的作用就是删除默认的苹果工具栏和菜单栏

//IOS中禁止将数字转为电话号码链接，Android中禁止自动识别页面中的邮件地址 
     　　

//默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。 
     

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:

      // 在设置书签的时候可以显示好看的图标

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">