webApp开发

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