h5頁面在移動端需要注意的一些事情

標籤：correct   nsf   input   想去   ane   target   spin   neu   忽略   

H5頁面在移動端無法滿屏自適應視窗，怎麼辦？

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

 

H5頁面在移動端字型應該怎麼設定？

1．iOS 系統

預設中文字型是Heiti SC

預設英文字型是Helvetica

預設數字字型是HelveticaNeue

無微軟雅黑字型

2.Android 系統

預設中文字型是Droidsansfallback

預設英文和數字字型是Droid Sans

無微軟雅黑字型 

3.Winphone 系統

預設中文字型是Dengxian(方正等線體)

預設英文和數字字型是Segoe

無微軟雅黑字型

各個手機系統有自己的預設字型，且都不支援微軟雅黑，如無特殊需求，手機端無需定義中文字型，使用系統預設英文字型和數字字型可使用 Helvetica ，三種系統都支援。

font-family:Helvetica;

 

點選連結就可以撥打到電話，怎麼辦？

<a href="tel:136****5546">咪咕閱讀客服電話</a>

 

點選連結就可以傳送簡訊，怎麼辦？

<a href="sms:136****5546">咪咕閱讀客服簡訊</a>

 

H5頁面的數字不想識別為電話號碼，怎麼辦？

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

 

H5頁面想忽略Android平台中對郵箱地址的識別，怎麼辦？

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

 

不想顯示webkit的捲軸，怎麼辦？

element::-webkit-scrollbar{ display: none;}

H5頁面的內容想不被人選中，怎麼辦？

-webkit-user-select: none;user-select: none;

 

H5頁面想禁止長按連結或長按圖片後快顯功能表，怎麼辦？

-webkit-touch-callout: none;

想取消IOS裡Button、Input上的預設樣式，怎麼辦？

-webkit-appearance: none;

 

想在Android裡H5頁面touch時沒有藍色的邊框與遮罩，怎麼辦？

-webkit-tap-highlight-color:rgba(0,0,0,0);

多張圖片放置在一起，不想有4PX的空隙，怎麼辦？

img{display:block}；

img{float:left}；

img{vertical-align:top} 

 

想改變Input裡 placeholder屬性的樣式，怎麼辦？

::-webkit-input-placeholder{color:#ccc}

 

H5頁面input type=”num”時想去掉右邊的上下箭頭，怎麼辦？

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important; margin: 0;}

H5頁面載入的圖片太大了，怎麼辦？

JPG圖片用JPEGmini壓縮，PNG可線上用http://tinypng.org/壓縮

在iOS系統中鍵盤輸入時不想首字母為大寫，怎麼辦？

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

在IOS系統中鍵盤輸入關閉自動修正，怎麼辦？

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

旋轉螢幕橫屏豎屏切換時，想禁止文本縮放，怎麼辦？

-webkit-text-size-adjust: 100%;

H5頁面想有快速回彈滾動的效果，怎麼辦？

overflow: auto; /* auto | scroll */

-webkit-overflow-scrolling: touch;

旋轉螢幕橫屏豎屏切換時想支援有不同的事件，怎麼辦？

事件

window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；

window.onorientationchange = function(){

    switch(window.orientation){

    case -90:

    case 90:

        alert("橫屏:" + window.orientation);

    case 0:

    case 180:

        alert("豎屏:" + window.orientation);

        break;

    }

} 

樣式

//豎屏時使用的樣式

@media all and (orientation:portrait) {

    .css{}

}

//橫屏時使用的樣式

@media all and (orientation:landscape) {

    .css{}

}

在Android 上想不顯示語音輸入按鈕，怎麼辦？

input::-webkit-input-speech-button {display: none}

想開發H5搖一搖功能，怎麼辦？

HTML5 deviceMotion：封裝了動作感應器資料的事件，可以擷取手機運動狀態下的運動加速度等資料。

 

https://github.com/FrontEndRoad/HTML5-FAQ

 

h5頁面在移動端需要注意的一些事情