上篇文章本來說簡單總結一下移動端兼容問題，但是寫著寫著就覺得這個東西不是一時半會就能說完的，所以索性慢慢來吧，把能夠想到的都給全部羅列一邊吧，萬一剛好有你需要的那一個呢？好了，話不多說！
話不多說，翠花，上干貨啦！
這次來總結一些零碎的小問題吧
h5頁面窗口自動調整到設備寬度并禁止用戶縮放頁面
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
移動端click屏幕產生200-300ms的延時響應
這個問題在我們開發(fā)項目時是最容易遇到的也是最可能忽略的，因為我們在平時的開發(fā)中已經習慣了用click來觸發(fā)點擊事件，在PC端的時候是沒有的問題的，但是卻忽略了在移動端出現(xiàn)的延遲問題，其實原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區(qū)域進行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區(qū)間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區(qū)域頁面的縮放操作。那么這個時間區(qū)間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對于web開發(fā)者來說是，頁面js捕獲click事件的回調函數(shù)處理，需要300ms后才生效，也就間接導致影響其他業(yè)務邏輯的處理。
解決方案：
1.fastclick插件：
原理：?在檢測到touchend事件的時候，會通過DOM自定義事件立即出發(fā)模擬一個click事件，并把瀏覽器在300ms之后真正的click事件阻止掉；
?使用:
? ? 引入
? ?<script type='application/javascript' src='/path/to/fastclick.js'></script>
? ? 使用了jquery的時候
? ? $(function() {
? ? ? ? FastClick.attach(document.body);
? ? });
? ? 沒使用jquery的時候
? ? if ('addEventListener' in document) {
? ? ? ? document.addEventListener('DOMContentLoaded', function() {
? ? ? ? ? ? FastClick.attach(document.body);
? ? ? ? }, false);
? ? }
? ??在vue或react中使用
? ? 安裝
? ? npm install fastclick -S
? ? ?引入
? ? import FastClick from 'fastclick'
? ? 使用
? ? FastClick.attach(document.body);
2.zepto的touch模塊，tap事件，
原理：利用touchstart和touchend來模擬click事件
使用：因為zepto本身就是為移動端打造的jquery,使用起來和jquery基本一模一樣。至于jq怎么用不用多說了吧？
ios 設置input 按鈕樣式會被默認樣式覆蓋
解決辦法
input，textarea{
border:0;
?-webkit-appearance: none;
}
今天就寫到這里，下次再想起來其他的再更吧!希望對你有一點點的幫助！
