1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2、禁止将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
ps:在设置这个的时候一定要注意你的项目是否需要通过a标签来拨打电话的
3、忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
4、将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->
以上都是写在head上的
css样式部分:
1、禁止ios和android用户选中文字
.css{-webkit-user-select:none}
2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
ps: 谨慎使用,特别是有附带二维码推广的项目
3、webkit去除表单元素的默认样式
.css{-webkit-appearance:none;}
4、修改webkit表单输入框placeholder的样式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5、去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
6、ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}
7、android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}
8、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅（这个属性会调用硬件加速模式），但是在android下不可乱用，会产生很多见所未见的bug
9、清除页面滚动条的问题:
可以用css伪类可以实现,(::-webkit-scrollbar{width:0;height:0})
比如: .text::-webkit-scrollbar{width:0;height:0}
ps:这个可以用来自定义滚动条,大家都懂的,我就不多说了.
10、一像素边框:
1.通过伪类实现:
.nav::before{
position: absolute;
bottom: 1px;
left: 0;
content: '';
width: 100%;
height: 1px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-webkit-transform: scaleY(0.5);
}
2.可以让美工切出0.5px的图片来实现(难说话的美工一般不情愿干);
3.可以用meta设置成缩小到0.5倍,然后其他元素再放大到1倍(可以实现,但是,不推荐使用,不推荐使用,不推荐使用,);
以上是我自己在工作过程中自己使用过的,大家可以放心使用,欢迎大家补充,有错轻喷.
