移動端HTML5頁面開發備忘錄

任毅發表於2018-03-16
HTML

關於Meta的設定

1.基本樣式的設定

<!-- 設定縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no, minimal-ui" />
<!-- 可隱藏位址列，僅針對IOS的Safari（注：IOS7.0版本以後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection" content="telephone=no, email=no" />
複製程式碼

2.搜尋引擎的設定

<!-- 搜尋引擎索引方式：通常有如下幾種取值：none，noindex，nofollow，
all，index和follow。-->
<meta name="robots" content="index,follow" />
<!--
    all：檔案將被檢索，且頁面上的連結可以被查詢；
    none：檔案將不被檢索，且頁面上的連結不可以被查詢；
    index：檔案將被檢索；
    follow：頁面上的連結可以被查詢；
    noindex：檔案將不被檢索；
    nofollow：頁面上的連結不可以被查詢。
 -->
複製程式碼

3.頁面快取的設定

<!-- 清除快取 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
複製程式碼

常見移動端字型

/*中英字型名對照表
宋體      SimSun
黑體      SimHei
微信雅黑   Microsoft Yahei
微軟正黑體 Microsoft JhengHei
新宋體    NSimSun
新細明體  MingLiU
細明體    MingLiU
標楷體    DFKai-SB
仿宋     FangSong
楷體     KaiTi
仿宋_GB2312  FangSong_GB2312
楷體_GB2312  KaiTi_GB2312  
說明：中文字型多數使用宋雅黑，英文用Helvetica
*/
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
複製程式碼

字型單位font-size選擇px還是rem

/*如需適配多種移動裝置，建議使用rem。以下為參考值：*/
html { font-size: 62.5%; }   /*10÷16 = 62.5%*//*設定12px字型。
注：在rem前要加上對應的px值，解決不支援rem的瀏覽器的相容問題，做到優雅降級*/
body { font-size:12px; font-size:1.2rem; }
複製程式碼

touch事件

事件響應順序： ontouchstart > ontouchmove > ontouchend > onclick

  • touchstart ——當手指觸碰螢幕時候發生
  • touchmove ——當手指在螢幕上滑動時連續觸發。
  • 通常在滑屏頁面，會呼叫 event 的 preventDefault() 可以阻止預設情況的發生：阻止頁面滾動
  • touchend ——當手指離開螢幕時觸發
  • touchcancel ——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面 alert() ，此時會觸發該事件，這個事件比較少用。

TouchEvent說明：

  • touches：螢幕上所有手指的資訊
  • targetTouches：手指在目標區域的手指資訊
  • changedTouches：最近一次觸發該事件的手指資訊
  • touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，用於計算手指資訊

引數資訊(changedTouches[0])

  • clientX、clientY在顯示區的座標
  • target：當前元素

禁用input在ios下輸入英文首字母的預設大寫

<input autocapitalize="off" autocorrect="off" />
複製程式碼

消除transition閃屏

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
複製程式碼

螢幕旋轉的事件和樣式

js處理程式碼

function orientInit(){
    var orientChk = document.documentElement.clientWidth >
    document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //橫屏下需要執行程式碼
    }else{
        //豎屏下需要執行程式碼
    }
}

orientInit();window.addEventListener
('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)
複製程式碼

css處理程式碼

/*豎屏時樣式*/
@media all and (orientation:portrait){   }/*橫屏時樣式*/
@media all and (orientation:landscape){   }
複製程式碼

其他一些css的處理

*禁止長按連結與圖片彈出選單*/
a,img { -webkit-touch-callout: none }    /*禁止ios和android使用者選中文字*/
html,body {-webkit-user-select:none; user-select: none; }
/*改變輸入框placeholder的顏色值*/
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }
/*android上去掉語音輸入按鈕*/
input::-webkit-input-speech-button {display: none}

ul {-webkit-overflow-scrolling : touch}
/*解決列表在移動端滑動阻澀的問題*/
複製程式碼

附：文章中有些內容是搬用的，本篇只是個人整理出來。持續增添中……

相關文章