移動端H5開發踩坑記錄

html 篇

常用的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-00111
11 位數字，形如：13800138000

<!--關閉識別-->
<meta name="format-detection" content="telephone=no" />

<!--開啓識別-->
<a href="tel:123456">123456</a>

郵箱識別（Android）

安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的 meta 來管別郵箱的自動識別

<!--關閉識別-->
<meta content="email=no" name="format-detection" />

<!--開啓識別-->
<a mailto:[email protected]">[email protected]</a>

css 篇

0.5px細線

DPR(devicePixelRatio) 設備像素比，它是默認縮放爲 100%的情況下，設備像素和 CSS 像素的比值。目前主流的屏幕 DPR=2(iPhone 8),或者 3(iPhone 8 Plus)。拿 2 倍屏來說，設備的物理像素要實現 1 像素，而 DPR=2，所以 css 像素只能是 0.5

/* 底邊框 */ 
.b-border { 
  position: relative; 
} 
.b-border:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 100%; 
  height: 1px; 
  background: #d9d9d9; 
  -webkit-transform: scaleY(0.5); 
  transform: scaleY(0.5); 
  -webkit-transform-origin: 0 0; 
  transform-origin: 0 0; 
} 
/* 上邊框 */ 
.t-border { 
  position: relative; 
} 
.t-border:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 1px; 
  background: #d9d9d9; 
  -webkit-transform: scaleY(0.5); 
  transform: scaleY(0.5); 
  -webkit-transform-origin: 0 0; 
  transform-origin: 0 0; 
} 
/* 右邊框 */ 
.r-border { 
  position: relative; 
} 
.r-border:before { 
  content: ''; 
  position: absolute; 
  right: 0; 
  bottom: 0; 
  width: 1px; 
  height: 100%; 
  background: #d9d9d9; 
  -webkit-transform: scaleX(0.5); 
  transform: scaleX(0.5); 
  -webkit-transform-origin: 0 0; 
  transform-origin: 0 0; 
} 
/* 左邊框 */ 
.l-border { 
  position: relative; 
} 
.l-border:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 1px; 
  height: 100%; 
  background: #d9d9d9; 
  -webkit-transform: scaleX(0.5); 
  transform: scaleX(0.5); 
  -webkit-transform-origin: 0 0; 
  transform-origin: 0 0; 
} 
 
/* 四條邊 */ 
.setBorderAll { 
  position: relative; 
  &:after { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200%; 
    height: 200%; 
    transform: scale(0.5); 
    transform-origin: left top; 
    box-sizing: border-box; 
    border: 1px solid #e5e5e5; 
    border-radius: 4px; 
  } 
}

屏蔽用戶選擇

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;
}

設置輸入框裏面 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

/* 在滾動容器上增加滾動 touch 方法*/
.wrapper {
  -webkit-overflow-scrolling: touch;
}

設置外部 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的延遲問題
觸摸事件的響應順序：ontouchstart、ontouchmove、ontouchend、onclick

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

蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由用戶來觸發纔可以播放。加入自動觸發播放的代碼

audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常；
audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間；
注意不要遺漏微信的兼容處理需要引用微信JS

<audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        //優先播放音樂bg.ogg，不支持再播放bg.mp3
</audio>

$('html').one('touchstart', function() { 
  audio.play() 
}) 

//微信端兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

iOS 上拉邊界下拉出現空白

手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白

document.body.addEventListener( 
  'touchmove', 
  function(e) { 
    if (e._isScroller) return 
    // 阻止默認事件 
    e.preventDefault() 
  }, 
  { 
    passive: false 
  } 
)

ios 日期轉換 NAN 的問題

將日期字符串的格式符號替換成’/’

'yyyy-MM-dd'.replace(/-/g, '/')

軟鍵盤問題

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 做以下修改

FastClick.prototype.focus = function(targetElement) {
  var length
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf('date') !== 0 &&
    targetElement.type !== 'time' &&
    targetElement.type !== 'month'
  ) {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length)
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

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%;
}

作者：lzg9527
鏈接：https://juejin.im/post/5e4a0162f265da57133b2005
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

移動端H5開發踩坑記錄

html 篇

常用的meta屬性設置

css 篇

js 篇

vue項目獲取富文本編輯器wangEditor內容導出爲word（html轉word格式並下載）

dotnet C# 創建 X11 應用時設置窗口背景顏色

Navicat安裝與激活教程

TDengine docker安裝方法

vue3組件通信與props

sapui5

Alpine Linux apk add DNS lookup error

部分JDK版本的發佈時間

工作中用到的腳本合集

合併代碼時Beyond Compare設置

基於Node與express完成圖書管理系統項目

JS解決查找表與求和問題

ES6開發-babel

Node.js實現服務器配置

Node.js模塊封裝

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結