1、移動端字型定義

body{font-family: Helvetica;}

說明：在pc端，我們通常都會使用“微軟雅黑”字型。但在移動端，ios、 android、winphone三大系統都沒有“微軟雅黑”字型。各手機系統都有自己的預設中文字型，且肉眼很難看出區別。所以在無特殊需求的情況下，直接使用系統預設中文字型就好。

英文和數字都設定為 Helvetica，三種系統都支援。而且，在ios中預設的英文和數字是兩種不同的字型，如果不設定成一種字型，顯示效果不一樣。

2、取消chrome瀏覽器下預設的文字框聚焦樣式。這個解決辦法同pc端相同。

沒有做設定的情況下，在chrome瀏覽器中啟用input元素。會在input框的周圍出現邊框。

說明：只要在css樣式中，做如下設定即可解決。

input，textarea{outline:none;}

3、移動端長按圖片(img)、連結(a)或其他物件，會彈出系統選單。

例如：在聯通的一個業務辦理頁面，長按按鈕後，會彈出系統選單。

說明：阻止長按頁面，彈出選單的方法。（此方法只針對ios系統，android系統尚未解決）

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

4、移動端如何清除輸入框內陰影

在iOS上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，可以按照下面的方法關閉：

input,textarea{border: 0; -webkit-appearance:none;}
 

5、移動端，預設情況下當裝置切換到橫屏顯示時，文字大小會發生變化。但如果要禁止文字自動調整大小，ios裝置可使用下面的做法：

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

但此方法只對chrome27.0 版本以下有效，27.0以上版本無效。

那麼，在新版的chrome，可以使用css3方法，使文字大小不發生變化。這種方法最好運用到具體的物件上。

.box{transform:scale(0.875);}

6、去掉點選連結時，產生的半透明遮罩。

使用ios系統手機的使用者，在點選一個連結時，會出現一個半透明灰色遮罩。如下面的例子。

這是招商銀行的一個宣傳頁面，當“點選購買”按鈕，就會出現一個灰色的半透明遮罩。

如果想要去掉這個遮罩，可設定-webkit-tap-highlight-color的alpha值為0。部分android系統中元素被點選時，也會產生半透明遮罩或者邊框，也用此方法解決。

a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0;) }

7、修改輸入框提示資訊placeholder的文字顏色。

placeholder的文字顏色與輸入內容的文字色不同，預設是淺灰色的。如要與輸入內容的文字顏色保持一致，可做下面的設定：

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;
}
:-ms-input-placeholder{
    color: #000;
}
::-webkit-input-placeholder{
    color: #000;
}

如果要對某個標籤或類，id做設定，可以在前面加上就好：

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; 
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;
}
input:-ms-input-placeholder{
    color: #000;
}
input::-webkit-input-placeholder{
    color: #000;
}