html 篇常用的meta屬性設定

meta對於移動端的一些特殊屬性，可根據需要自行設定

<meta name="screen-orientation" content="portrait"> //Android 禁止螢幕旋轉<meta name="full-screen" content="yes">             //全屏顯示<meta name="browsermode" content="application">     //UC應用模式，使用了application這種應用模式後，頁面講預設全屏，禁止長按選單，禁止收拾，標準排版，以及強制圖片顯示。<meta name="x5-orientation" content="portrait">     //QQ強制豎屏<meta name="x5-fullscreen" content="true">          //QQ強制全屏<meta name="x5-page-mode" content="app">            //QQ應用模式複製程式碼

電話號碼識別

在 iOS Safari （其他瀏覽器和 Android 均不會）上會對那些看起來像是電話號碼的數字處理為電話連結，比如：

7 位數字，形如：1234567帶括號及加號的數字，形如：(+86)123456789雙連線線的數字，形如：00-00-0011111 位數字，形如：13800138000

關閉識別

<meta name="format-detection" content="telephone=no" />複製程式碼

開啟識別

<meta content="email=no" name="format-detection" />複製程式碼

同樣地，我們也可以通過標籤屬性來開啟長按郵箱地址彈出郵件傳送的功能：

<a mailto:[email protected]">[email protected]</a>複製程式碼

css 篇0.5px細線

移動端 H5 專案越來越多，設計師對於 UI 的要求也越來越高，比如 1px 的邊框。在高清屏下，移動端的 1px 會很粗。

那麼為什麼會產生這個問題呢？主要是跟一個東西有關，DPR(devicePixelRatio) 裝置畫素比，它是預設縮放為 100%的情況下，裝置畫素和 CSS 畫素的比值。目前主流的螢幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏來說，裝置的物理畫素要實現 1 畫素，而 DPR=2，所以 css 畫素只能是 0.5。

下面介紹最常用的方法

<meta name="screen-orientation" content="portrait"> //Android 禁止螢幕旋轉<meta name="full-screen" content="yes">             //全屏顯示<meta name="browsermode" content="application">     //UC應用模式，使用了application這種應用模式後，頁面講預設全屏，禁止長按選單，禁止收拾，標準排版，以及強制圖片顯示。<meta name="x5-orientation" content="portrait">     //QQ強制豎屏<meta name="x5-fullscreen" content="true">          //QQ強制全屏<meta name="x5-page-mode" content="app">            //QQ應用模式複製程式碼

遮蔽使用者選擇

禁止使用者選擇頁面中的文字或者圖片

div {  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}複製程式碼

清除輸入框內陰影

在 iOS 上，輸入框預設有內部陰影,以這樣關閉：

div {  -webkit-appearance: none;}複製程式碼

如何禁止儲存或拷貝影象

程式碼如下

img {  -webkit-touch-callout: none;}複製程式碼

輸入框預設字型顏色

設定 input 裡面 placeholder 字型的顏色

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {  color: #c7c7c7;}input:-moz-placeholder,textarea:-moz-placeholder {  color: #c7c7c7;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {  color: #c7c7c7;}複製程式碼

使用者設定字號放大或者縮小導致頁面佈局錯誤

設定字型禁止縮放

body {  -webkit-text-size-adjust: 100% !important;  text-size-adjust: 100% !important;  -moz-text-size-adjust: 100% !important;}複製程式碼

android系統中元素被點選時產生邊框

部分android系統點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣。去除程式碼如下

a,button,input,textarea{  -webkit-tap-highlight-color: rgba(0,0,0,0)  -webkit-user-modify:read-write-plaintext-only; }複製程式碼

iOS 滑動不流暢

ios 手機上下滑動頁面會產生卡頓，手指離開頁面，頁面立即停止運動。整體表現就是滑動不流暢，沒有滑動慣性。 iOS 5.0 以及之後的版本，滑動有定義有兩個值 auto 和 touch，預設值為 auto。

解決方案

在滾動容器上增加滾動 touch 方法

.wrapper {  -webkit-overflow-scrolling: touch;}複製程式碼

設定 overflow 設定外部 overflow 為 hidden,設定內容元素 overflow 為 auto。內部元素超出 body 即產生滾動，超出的部分 body 隱藏。

body {  overflow-y: hidden;}.wrapper {  overflow-y: auto;}複製程式碼

js 篇移動端click螢幕產生200-300 ms的延遲響應

移動裝置上的web網頁是有300ms延遲的，往往會造成按鈕點選延遲甚至是點選失效。解決方案：

fastclick可以解決在手機上點選事件的300ms延遲zepto的touch模組，tap事件也是為了解決在click的延遲問題

觸控事件的響應順序

ontouchstartontouchmoveontouchendonclickaudio 和 video 在 ios 和 andriod 中自動播放

這個不是bug，由於自動播放網頁中的音訊或視訊，會給使用者帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由使用者來觸發才可以播放。加入自動觸發播放的程式碼

<meta name="format-detection" content="telephone=no" />複製程式碼

iOS 上拉邊界下拉出現空白

手指按住螢幕下拉，螢幕頂部會多出一塊白色區域。手指按住螢幕上拉，底部多出一塊白色區域。

在 iOS 中，手指按住螢幕上下拖動，會觸發 touchmove 事件。這個事件觸發的物件是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。

解決方案

<meta content="email=no" name="format-detection" />複製程式碼

軟鍵盤問題IOS 鍵盤彈起擋住原來的檢視可以通過監聽移動端軟鍵盤彈起 Element.scrollIntoViewIfNeeded（Boolean）方法用來將不在瀏覽器視窗的可見區域內的元素滾動到瀏覽器視窗的可見區域。 如果該元素已經在瀏覽器視窗的可見區域內，則不會發生滾動。true，則元素將在其所在滾動區的可視區域中居中對齊。false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。 根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。

window.addEventListener('resize', function() {  if (    document.activeElement.tagName === 'INPUT' ||    document.activeElement.tagName === 'TEXTAREA'  ) {    window.setTimeout(function() {      if ('scrollIntoView' in document.activeElement) {        document.activeElement.scrollIntoView(false)      } else {        document.activeElement.scrollIntoViewIfNeeded(false)      }    }, 0)  }})複製程式碼

onkeyUp 和 onKeydown 相容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支援不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之後，並未立刻相應 keyup 事件

IOS12 輸入框難以點選獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 IOS12 的相容性，可在 fastclick.js 原始碼或者 main.js 做以下修改

<a mailto:[email protected]">[email protected]</a>複製程式碼

IOS 鍵盤收起時頁面沒用回落，底部會留白

通過監聽鍵盤迴落時間滾動到原來的位置

window.addEventListener('focusout', function() {  window.scrollTo(0, 0)})//input輸入框彈起軟鍵盤的解決方案。var bfscrolltop = document.body.scrollTop$('input')  .focus(function() {    document.body.scrollTop = document.body.scrollHeight    //console.log(document.body.scrollTop);  })  .blur(function() {    document.body.scrollTop = bfscrolltop    //console.log(document.body.scrollTop);  })複製程式碼

IOS 下 fixed 失效的原因

軟鍵盤喚起後，頁面的 fixed 元素將失效，變成了 absolute，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不僅限於 type=text 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。

解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設為 100%，overflow:scroll

<body>  <div class='warper'>    <div class='main'></div>  <div>  <div class="fix-bottom"></div></body>複製程式碼

.warper {  position: absolute;  width: 100%;  left: 0;  right: 0;  top: 0;  bottom: 0;  overflow-y: scroll;  -webkit-overflow-scrolling: touch; /* 解決ios滑動不流暢問題 */}.fix-bottom {  position: fixed;  bottom: 0;  width: 100%;}