1、移動端點選a標籤出現的背景色

 a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
 

2、對於超出div範圍的內容進行省略號（...）顯示

　　2.1、單行顯示

div{
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space
 
: nowrap  
}

　　2.2、多行顯示

div{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;  
    -webkit-line-clamp: 2;//可以輸入你想要的行數
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

　　　2.3、正常情況下是沒有問題的，但是如果你對你的程式碼進行webpack打包，可能就會出現打包後-webkit-box-orient: vertical;消失了，這個時候就需要這樣實施了：

 /*
 
 autoprefixer: off */
    -webkit-box-orient: vertical;
  /* autoprefixer: on */

 如果你使用的是webpack自帶的打包配置，則需要註釋掉webpack.prod.conf.js中的如下外掛

  new OptimizeCSSPlugin({
     cssProcessorOptions: config.build.productionSourceMap
         ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
 

並且在util.js中的如下部分加入minimize:true

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      minimize: true
    }
  }

這樣在生產環境中打包的css也會壓縮，並且使那個樣式消失。

3、百度禁止轉碼

通過百度開啟網頁時，百度可能會對你的網站進行轉碼，往你頁面上新增廣告之類的，我們可以通過meta標籤來禁止它：

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

4、設定狀態列的背景顏色（IOS）

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

content引數：

• default: 狀態列背景是白色
• black:狀態列背景是黑色
• black-translucent：狀態列背景是半透明。如果設定為default或者black,網頁內容從狀態列底部開始。如果設定為black-translucent，網頁內容充滿整個螢幕，頂部會被狀態列遮擋。

5、h5頁面視窗自動調整到裝置寬度，並且禁止縮放

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

• width：設定viewport的寬度，為一個正整數，或者一個字串‘device-width’
• height：設定視窗高度，一般設定了寬度，會自動解析出高度，可以不用設定
• initial-scale：預設縮放比例，為一個數字，可以帶小數
• minimum-scale：允許使用者最小縮放比例，為一個數字，可以帶小數
• maximum-scale：允許使用者最大縮放比例，為一個數字，可以帶小數
• user-scalable：是否允許手動縮放

6、可隱藏位址列(IOS)

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

7、移動端手機號碼識別(IOS)

在IOS Safari上會對那些看起來像是電話號碼的數字處理為電話連結，我們可以通過meta來關閉對電話號碼的自動識別：

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

在頁面中標籤實現打電話

<a href="tel:0755-10086">打電話給:0755-10086</a>

發簡訊

<a href="sms:123456">123456</a> 

8、移動端郵箱識別(Android)

在安卓上會對符合郵箱格式的字串進行識別，我們可以通過如下meta來管理郵箱的自動識別：

<meta content="email=no" name="format-detection" /> 

郵件的實現方法：

//1.普通郵件
<a href="mailto:826248794qq.com">點選我發郵件</a>
//2.收件地址後新增?cc=開頭，可新增抄送地址（Android存在相容問題）
<a href="mailto:[email protected][email protected]">點選我發郵件</a>

9、優先使用最新版本IE和Chrome

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

10、表單輸入框上的placeholder的顏色值得改變

input::-webkit-input-placeholder{color:#ff1234;}
input:focus::-webkit-input-placeholder{color:#ff1234}

11、禁止文字縮放

當移動裝置橫豎屏切換時，文字的大小會重新計算，進行相應的縮放，如果你不需要這樣，可以選擇禁止。在pc端該屬性已經被移除，若該屬性要在移動端生效，必須設定meta viewport

html {
　　        -webkit-text-size-adjust: 100%;
}

12、移動端禁止選中內容

div{
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動端不需要） */
  -ms-user-select: none;      /* IE 10+ */ 
}

13、禁止儲存或者拷貝圖片（IOS）。當在手機上長按圖片img，會彈出選項儲存圖片或者拷貝圖片，如果你不想使用者這樣操作，你可以設定以下樣式禁止

img { -webkit-touch-callout: none; }

14、audio元素和video元素在ios和android中無法自動播放。我們可以設定觸屏即播

$('html').one('touchstart',function(){
    audio.play()
})

15、手機拍照和上傳圖片的<input type="file" />的accept屬性

<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視訊 -->
<input type=file accept="video/*">

16、消除transition閃屏

div{
    /*設定內嵌的元素在 3D 空間如何呈現：保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏）*/
    -webkit-backface-visibility: hidden;
}

17、開啟硬體加速，解決頁面閃白，保證動畫流暢

div{
    -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}

18、關閉IOS鍵盤首字母自動大寫。

<input type="text" autocapitalize="off" />

19、解決字型在移動端比例縮小後出現鋸齒的問題

-webkit-font-smoothing: antialiased;

 未完待續.......