移動端布局注意事項學習之一

標籤：長按   width   alias   儲存   adjust   win   bsp   AC   content   

0、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

<meta name="msapplication-tap-highlight" content="no">

1、關閉iOS鍵盤首字母自動大寫

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

2、禁止文本縮放

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

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

在iOS上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：

input, textarea {

　　border: 0;
　　-webkit-appearance: none;
}

4、忽略頁面的數字為電話，忽略email識別

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

6、移動端禁止選中內容

div {
　　-webkit-user-select: none;
}

8、如何禁止儲存或拷貝映像

通常當你在手機或者pad上長按映像 img ，會彈出選項 儲存映像 或者 拷貝映像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：

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

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

-webkit-font-smoothing: antialiased;

10、柵格布局：

box-sizing:border-box;可以改變盒子模型的計算方式方便你設定寬進行自適應流式布局

12、按鈕被按下效果的實現需要給a標籤加a:active屬性和添加一段空函數

document.body.addEventListener(‘touchend‘, function () { });

13、解決去掉下邊框：

-webkit-border-bottom:none;

14、英文文本換行(不拆分單詞)：

word-wrap: break-word

15、字型大小盡量使用pt或者em，rem，代替px。

16、設定input裡面placeholder字型的大小

::-webkit-input-placeholder{

　　font-size:10pt;

}

17、wap頁面有img標籤，記得加上display：block；屬性來解決img的邊緣空白間隙的1px像素。如果圖片要適應不同的手機要設定width:100%;而且不能添加高度。

對於網站字型設定

移動端項目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

移動和pc端項目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

 

移動端布局注意事項學習之一