移动端开发备忘

这是一些移动端开发的备忘记录。

<meta> 元素

<meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>  
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）  
height：高度（数值 / device-height）（范围从223 到10,000）  
initial-scale：初始的缩放比例 （范围从>0 到10）  
minimum-scale：允许用户缩放到的最小比例  
maximum-scale：允许用户缩放到的最大比例  
user-scalable：用户是否可以手动缩 (no,yes)   

WebApp全屏模式：伪装app，离线应用。

<meta name=“apple-mobile-web-app-capable” content=“yes” /> <!– 启用 WebApp 全屏模式 –>  
隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<meta name=“apple-mobile-web-app-status-bar-style” content=“black-translucent” />  
忽略数字自动识别为电话号码

<meta content=“telephone=no” name=“format-detection” />   
忽略识别邮箱

<meta content=“email=no” name=“format-detection” />  
添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档

<meta name=“apple-itunes-app” content=“app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>  
其它

<!– 针对手持设备优化，主要是针对一些老的不识别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”>  
rem单位，可以根据html来设定基准值

//1rem = 10px  
html { font-size: 62.5%; }   
//或者通过js来算  
0.0625*(640<=document.documentElement.clientWidth?640:document.documentElement.clientWidth)+“px”  
js事件属性

e.changedTouches[0];  
Android端有些设备不触发touchend事件解决办法：

document.ontouchmove = function(ev){  
    ev.preventDefault();  
}  
媒体查询Media Query

//浏览器宽度小于等于320的时候  
@media screen and (max-width:320px) {  
    body{}  
}  
Flex布局，由于新旧属性的关系，导致有些低版本不支持，需要全部写出来，基本可以兼容所有

.page-wrap {  
    display: -webkit-box;      /* OLD – iOS 6-, Safari 3.1-6 */  
    display: -moz-box;         /* OLD – Firefox 19- (buggy but mostly works) */  
    display: -ms-flexbox;      /* TWEENER – IE 10 */  
    display: -webkit-flex;     /* NEW – Chrome */  
    display: flex;             /* NEW, Spec – Opera 12.1, Firefox 20+ */  
}     
.main-sidebar {  
    -webkit-box-flex: 1;      /* OLD – iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;         /* OLD – Firefox 19- */  
    -webkit-flex: 1;          /* Chrome */  
    -ms-flex: 1;              /* IE 10 */  
    flex: 1;                  /* NEW, Spec – Opera 12.1, Firefox 20+ */  
}     
改变placeholder的颜色

::-webkit-input-placeholder { /* WebKit browsers */  
    color:#999;  
}  
::-moz-placeholder { /* Mozilla Firefox 19+ */  
    color:#999;  
}  
:-ms-input-placeholder { /* Internet Explorer 10+ */  
    color:#999;  
}  
IOS中Safari设置保存到桌面图标：

<link rel=“apple-touch-icon” href=“custom_icon.png”>  
被点击元素的外观变化，比如a标签，被点击的时候，会出现一圈颜色，看下面的演示(用手机端查看)，第一个没有加样式，点击会出现黑色背景，第二个加了样式则没有：

-webkit-tap-highlight-color:rgba(0,0,0,0)  
点击我再点击我
input,button默认样式清除，在是移动端，这些都默认都带有样式，有的圆角，阴影，加上下面的代码即可

-webkit-appearance: none;  
active的bug，有时候我们需要在点击某个元素的时候，改变自身透明度，或者颜色，这些交互很常见，可以用:active来完成，但是有些手机上不起作用，需要加上一段js：

document.body.addEventListener(‘touchstart‘,function(){},false);  
给overflow:auto的滚动条，添加快速滑动效果

-webkit-overflow-scrolling : touch;  
iOS中如何禁止用户保存图片＼复制图片

-webkit-touch-callout:none  
穿透绝对定位元素去触发下面元素的某些行为

pointer-events:none;