H5手機端常見問題彙總
阿新 • • 發佈：2018-11-08
1、防止手機中網頁放大和縮小，這點是最基本的，最為手機網站開發者來說應該都知道的，就是設定meta中的viewport 還有就是，有些手機網站我們看到如下宣告： <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 設定了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設定DTD,直接宣告<!DOCTYPE html>。 使用viewport使頁面禁止縮放。 通常把user-scalable設定為0來關閉使用者對頁面檢視縮放的行為。 <metaname="viewport"content="user-scalable=0"/> 但是為了更好的相容，我們會使用完整的viewport設定。 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> 當然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。 2、apple-mobile-web-app-capable apple-mobile-web-app-capable是設定Web應用是否以全屏模式執行。 語法：<meta name="apple-mobile-web-app-capable"content="yes"> 說明：如果content設定為yes，Web應用會以全屏模式執行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。 3、format-detection format-detection 啟動或禁用自動識別頁面中的電話號碼。 語法：<meta name="format-detection"content="telephone=no"> 說明：預設情況下，裝置會自動識別任何可能是電話號碼的字串。設定telephone=no可以禁用這項功能。 4、html5呼叫安卓或者ios的撥號功能 html5提供了自動呼叫撥號的標籤，只要在a標籤的href中新增tel:就可以了。 如下：ahref="tel:4008106999,1034">400-810-6999 轉 1034</a> 撥打手機直接如下 <a href="tel:15677776767">點選撥打15677776767</a> 5、禁止複製、選中文字 * { -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; } 6、長時間按住頁面出現閃退 * { -webkit-touch-callout:none; } 7、iphone及ipad下輸入框預設內陰影 input{ -webkit-appearance:none; } 8、ios和android下觸控元素時出現半透明灰色遮罩 a { -webkit-tap-highlight-color:rgba(255,255,255,0) } 設定alpha值為0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。 9、圓角bug 某些Android手機圓角失效 background-clip: padding-box; 10、設定快取 <metahttp-equiv="Cache-Control"content="no-cache"/> 手機頁面通常在第一次載入後會進行快取，然後每次重新整理會使用快取而不是去重新向伺服器傳送請求。如果不希望使用快取可以設定no-cache。 11、移動端點選300ms延遲 300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致使用者體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。 $("#haorooms").on("touchend",function(event) { event.preventDefault(); }); 12、移動端 HTML5 audio autoplay 失效問題 這個不是 BUG，由於自動播放網頁中的音訊或視訊，會給使用者帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由使用者來觸發才可以播放。 解決方法思路：先通過使用者 touchstart 觸碰，觸發播放並暫停（音訊開始載入，後面用 JS 再操作就沒問題了）。 解決程式碼： document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); }); 13、JS判斷微信瀏覽器 function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; } } 14、JS判斷裝置 function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; document.writeln("您的瀏覽裝置為："); if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { document.writeln("phone"); } else { document.writeln("pc"); } } browserRedirect(); 15、微信瀏覽器使用者調整字型大小後頁面矬了，怎麼阻止使用者調整 //以下程式碼可使Android機頁面不再受使用者字型縮放強制改變大小，但是會有1S左右延時，期間可以考慮loading來處理 if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) }); }else{ setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止使用者調整字型大小 body { -webkit-text-size-adjust:100%!important; } 16、螢幕旋轉的事件和樣式 //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){ } 17、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; } 18、空白頁基本meta標籤 <!-- 設定縮放 --> <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" />