H5兼容問題及解決方法

時間  2019-11-10
標籤 h5 兼容 問題 解決 方法 简体版
原文   原文鏈接

Meta基礎知識：

  • H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 
    //1、HTML頁面結構
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
// height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
// initial-scale    默認縮放比例，爲一個數字，能夠帶小數
// minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
// maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
// user-scalable    是否容許手動縮放

//2、JS動態判斷
var phoneWidth =  parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
    var version = parseFloat(RegExp.$1);
    if(version>2.3){
        document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    }else{
        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    }
} else {
    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

     

  • 空白頁基本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" />
  • H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 
    <!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別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">

常見問題：

  • 移動端如何定義字體font-family 
    @ --------------------------------------中文字體的英文名稱
@ 宋體      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; }
  • 打電話發短信寫郵件怎麼實現 
    // 1、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>

//  2、發短信，winphone系統無效
<a href="sms:10086">發短信給: 10086</a>

// 3、寫郵件
//注：在添加這些功能時，第一個功能以"?"開頭，後面的以"&"開頭
//1.普通郵件
<a href="mailto:2692509295@qq.com">點擊我發郵件</a>
//2.收件地址後添加?cc=開頭，可添加抄送地址（Android存在兼容問題）
<a href="mailto:2692509295@qq.com?cc=yeyu0000@ye.net">點擊我發郵件</a>
//3.跟着抄送地址後，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）
<a href="mailto:2692509295@qq.com?cc=yeyu0000@ye.net&bcc=759905273@qq.com">點擊我發郵件</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
<a href="mailto:2692509295@qq.com;759905273@qq.com">點擊我發郵件</a>
//5.包含主題，用?subject=
<a href="mailto:2692509295@qq.com?subject=郵件主題">點擊我發郵件</a>
//6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行 
<a href="mailto:2692509295@qq.com?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點擊我發郵件</a>
//7.內容包含連接，含http(s)://等的文本自動轉化爲連接
<a href="mailto:2692509295@qq.com?body=http://www.baidu.com">點擊我發郵件</a>
//8.內容包含圖片（PC不支持）
<a href="mailto:2692509295@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a>
//9.完整示例
<a href="mailto:2692509295@qq.com;759905273@qq.com?cc=yeyu0000@yeah.net&bcc=7500000@qq.com&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>
  • 移動端touch事件（區分webkit和winphone） 
    /* 當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件 */
// 如下支持webkit
touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

//TouchEvent說明：
touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

//參數信息(changedTouches[0])
clientX、clientY在顯示區的座標
target：當前元素

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

// 如下支持winphone 8
MSPointerDown——當手指觸碰屏幕時候發生。無論當前有多少隻手指
MSPointerMove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用css的html{-ms-touch-action: none;}能夠阻止默認狀況的發生：阻止頁面滾動
MSPointerUp——當手指離開屏幕時觸發
  • 移動端click屏幕產生200-300ms的延時響應 
    說明：移動設備上的web網頁是有300ms延遲的，玩玩會形成按鈕點擊延遲甚至是點擊失效。

如下是歷史緣由，來源一個公司內一個同事的分享：
2007年蘋果發佈首款iphone上IOS系統搭載的safari爲了將適用於PC端上大屏幕的網頁能比較好的展現在手機端上，使用了雙擊縮放(double tap to zoom)的方案，好比你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然能夠撐滿整個屏幕，可是字體、圖片都很小看不清，此時能夠快速雙擊屏幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。

緣由就出在瀏覽器須要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉連接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做，因此，捕獲第一次單擊後，瀏覽器會先Hold一段時間t，若是在t時間區間裏用戶未進行下一次點擊，則瀏覽器會作單擊跳轉連接的處理，若是t時間裏用戶進行了第二次單擊操做，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操做。那麼這個時間區間t有多少呢？在IOS safari下，大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面，頁面須要過一段時間才響應，給用戶慢體驗感受，對於web開發者來講是，頁面js捕獲click事件的回調函數處理，須要300ms後才生效，也就間接致使影響其餘業務邏輯的處理。

//解決方案：
fastclick能夠解決在手機上點擊事件的300ms延遲
zepto的touch模塊，tap事件也是爲了解決在click的延遲問題
  • Rentina顯示屏原理及設計方案 
    說明：retina屏是一種具有超高像素密度的液晶屏，一樣大小的屏幕上顯示的像素點由1個變爲多個，如在一樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變爲4個。
在高清顯示屏中的位圖被放大，圖片會變得模糊，所以移動端的視覺稿一般會設計爲傳統PC的2倍。
那麼，前端的應對方案是：設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2

//例如圖片寬高爲：200px*200px，那麼寫法以下
.css{width:100px;height:100px;background-size:100px 100px;}
//其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px
.css{font-size:20px}

//image-set設計Rentina背景圖
image-set,webkit私有屬性，也是CSS4的屬性，爲解決Rentina屏幕下的圖像而生。
.css {
    background: url(images/bg.jpg) no-repeat center;
    background: -webkit-image-set(
    url(images/bg.jpg) 1x,     //支持image-set普通屏
    url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan
}
  • 點擊元素產生背景或邊框怎麼去掉
    /ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0去除灰色半透明遮罩；
//android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果；
//winphone系統,點擊標籤產生的灰色半透明背景，能經過設置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符
}   
// 也能夠 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">
  • 美化表單元素 
    //1、使用appearance改變webkit瀏覽器的默認外觀
input,select { -webkit-appearance:none; appearance: none; }

//2、winphone下，使用僞元素改變表單元素默認外觀
//1.禁用select默認箭頭，::-ms-expand修改表單控件下拉箭頭，設置隱藏並使用背景圖片來修飾
select::-ms-expand { display:none; }

//2.禁用radio和checkbox默認樣式，::-ms-check修改表單複選框或單選框默認圖標，設置隱藏並使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3.禁用pc端表單輸入框默認清除按鈕，::-ms-clear修改清除按鈕，設置隱藏並使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }
  • 移動端字體單位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; }

  • H5頁面rem兼容適配css

    $(document).ready(function(){
    //rem兼容
    var winW = $(window).width();
    var constant = winW/6.4;(10.8/7.5)
    $("html,body").css("font-size",constant);
    $(window).resize(function(){
        var winW = $(window).width();
        var constant = winW/10.8;
        $("html,body").css("font-size",constant);
    })
})

//使用時有可能形成div等容器過大。
//div中放入img時，讓div的寬高自適應，此時會形成容器的寬高可能會大於img的寬高.
//解決：容器添加  font-size:0 ,而後div中的內容使用rem
div {
    font-size:0;
}
div img {
    width:1rem;
}
div p {
    font-size:0.5rem;
}

  • 華爲樣式調整html

    //由於不一樣屏幕的寬高比尺寸的不一樣，因此上述的rem適配並不能很是好的適配全部手機。在chrome的調試器中會發現華爲手機的比例差距稍大（425 * 620），因此針對華爲手機的頁面時須要調整CSS樣式
//給予樣式
function loadStyle (url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
var w = $(window).width(),
    h=$(window).height();
var ratio = h/w;
if (ratio < 1.5){
    loadStyle("css/huawei.css");   //針對華爲手機進行樣式調整
}else if(ratio > 1.8){
    loadStyle("css/index.css");    //正常引用的樣式
}
  • 好用的CSS樣式 
    //去掉webkit的滾動條——display: none;
//其餘參數
::-webkit-scrollba //滾動條總體部分
::-webkit-scrollbar-thumb   //滾動條內的小方塊
::-webkit-scrollbar-track   //滾動條軌道
::-webkit-scrollbar-button  //滾動條軌道兩端按鈕
::-webkit-scrollbar-track-piece  //滾動條中間部分，內置軌道
::-webkit-scrollbar-corner       //邊角，兩個滾動條交匯處
::-webkit-resizer            //兩個滾動條的交匯處上用於經過拖動調整元素大小的小控件

// 禁止長按連接與圖片彈出菜單
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}

// 阻止windows Phone的默認觸摸事件
/*說明：winphone下默認觸摸事件事件使用e.preventDefault是無效的，可經過樣式來禁用，如：*/
html { -ms-touch-action:none; } //禁止winphone默認觸摸事件
  • 取消input在ios下，輸入的時候英文首字母的默認大寫 
    <input autocapitalize="off" autocorrect="off" />
  • 手機拍照和上傳圖片 
    //IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />
  • 屏幕旋轉的事件和樣式 
    //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){   }
  • audio元素和video元素在ios和andriod中沒法自動播放 
    //音頻，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>

//音頻，寫法二
<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>

//JS綁定自動播放（操做window時，播放音樂）
$(window).one('touchstart', function(){
    music.play();
})

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

//小結
//1.audio元素的autoplay屬性在IOS及Android上沒法使用，在PC端正常
//2.audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間
  • 重力感應事件 
    // 運用HTML5的deviceMotion，調用重力感應事件
if(window.DeviceMotionEvent){
    document.addEventListener('devicemotion', deviceMotionHandler, false)
}   

var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
    var acceleration = event.accelerationIncludingGravity;
    x = acceleration.x;
    y = acceleration.y; 
    z = acceleration.z;
    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
        //這裏是搖動後要執行的方法 
        yaoAfter();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}

function yaoAfter(){
    //do something
}
  • 微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整 
    //如下代碼可以使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; }

//最好的解決方案：最好使用rem或百分比佈局
  • 定位的坑 
    //fixed定位
//1.ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
//2.android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
//3.ios4下不支持position:fixed
//解決方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>
<script src="iscroll.js"></script>
<script>
    var myscroll;
    function loaded(){
        myscroll=new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>


//position定位
//Android下彈出軟鍵盤彈出時，影響absolute元素定位
//解決方案:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
    $('.ipt').on('focus', function(){
        $('.css').css({'visibility':'hidden'})
    }).on('blur', function(){
        $('.css').css({'visibility':'visible'})
    })
}
  • 播放視頻不全屏 
    <!--
1.ios7+支持自動播放
2.支持Airplay的設備（如：音箱、Apple TV)播放
x-webkit-airplay="true" 
3.播放視頻不全屏
webkit-playsinline="true" 
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
  • JS判斷設備 
    function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i<len,len = agent.length; i++){
        if(ua.indexOf(agent[i])>0){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})
  • JS判斷微信瀏覽器 
    function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}
  • android 2.3 bug 
    //1.@-webkit-keyframes 須要以0%開始100%結束，0%的百分號不能去掉
//2.after和before僞類沒法使用動畫animation
//3.border-radius不支持%單位，如要兼容，能夠給radius設置一下較大的值
//4.translate百分比的寫法和scale在一塊兒會致使失效，例如：
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
  • android 4.x bug 
    //1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
//2.同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分
//3.部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色
//4.android沒法同時播放多音頻audio
  • 消除transition閃屏 
    .css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
  • 開啓硬件加速 
    //目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當檢測到某個DOM元素應用了某些CSS規則時就會自動開啓，從而解決頁面閃白，保證動畫流暢。
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
  • 渲染優化 
    //1.禁止使用iframe（阻塞父文檔onload事件）
//2.禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）
//使用CSS3代碼代替JS動畫；
//開啓GPU加速；
//使用base64位編碼圖片(不小圖而言，大圖不建議使用)
    // 對於一些小圖標，可使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU。小圖標優點在於：
    //1.減小HTTP請求；
    //2.避免文件跨域；
    //3.修改及時生效；
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程