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倍(可以實現,但是,不推薦使用,不推薦使用,不推薦使用,);

以上是我自己在工作過程中自己使用過的,大家可以放心使用,歡迎大家補充,有錯輕噴.