移动端总结

1､常用的meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="format-detection" content="telephone=no">

<meta http-equiv="Cache-Control" content="no-cache" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<meta name="x5-fullscreen" content="true">

<meta name="x5-orientation" content="portrait">

<meta name="x5-orientation" content="landscape">

<meta name="x5-page-mode" content="app">


<meta name="full-screen" content="yes">

<meta name="screen-orientation" content="portrait">

<meta name="screen-orientation" content="landscape">

<meta name="browsermode" content="application">
2､IOS的H5页面滚动不流畅解决方案
在滚动层的外面的class添加-webkit-overflow-scrolling : touch;
3.去触摸元素时出现半透明灰色遮罩
-webkit-tap-highlight-color:rgba(255,255,255,0)
4､IOS 默认输入框内阴影重置
{ border: 0; -webkit-appearance: none; }
5､旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}
6、改变placeholder的样式
input::-webkit-input-placeholder{color:#000;}
input:focus::-webkit-input-placeholder{color:#000;}
textarea::-webkit-input-placeholder {text-align:left}
7､禁止选中
E { -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;}
8、IOS禁止保存或拷贝图像
img { -webkit-touch-callout: none; }
9､密码
input[type=text]{ -webkit-text-security: disc; }