[HTML] H5在webApp中的注意事項

經常使用的meta標籤

 <!--防止手機中網頁放大和縮小-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--備註：width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
     height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
     initial-scale    默認縮放比例，爲一個數字，能夠帶小數
     minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
     maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
     user-scalable    是否容許手動縮放-->
    <!--讓瀏覽器使用webkit來解析-->
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <!--禁止ios設備將數字做爲撥號鏈接，郵箱自動發送，點擊地圖跳轉-->
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <!--強制顯示全屏-->
    <meta name="full-screen" content="yes">
    <!--開啓對webapp的支持設置Web應用是否以全屏模式運行-->
    <meta name="apple-mobile-web-app-capable" content="yes">
 <!--備註：若是content設置爲yes，Web應用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示。
    你能夠經過只讀屬性window.navigator.standalone來肯定網頁是否以全屏模式顯示-->
    <!--webapp應用下狀態條顏色，默認值爲黑色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <!--備註：除非你先使用apple-mobile-web-app-capable指定全屏模式，不然這個meta標籤不會起任何做用。
    若是content設置爲default，則狀態欄正常顯示。若是設置爲blank，則狀態欄會有一個黑色的背景。
    若是設置爲blank-translucent，則狀態欄顯示爲黑色半透明。若是設置爲default或blank，則頁面顯示在狀態欄的下方，
    即狀態欄佔據上方部分，頁面佔據下方部分，兩者沒有遮擋對方或被遮擋。若是設置爲blank-translucent，則頁面會充滿屏幕，
    其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕爲40px）。默認值是default。-->
    <!--禁止瀏覽器從緩存中訪問頁面-->
    <meta http-equiv="pragma" content="no-cache">
    <!--禁止自動識別電話號碼-->
    <meta name="format-detection" content="telephone=no"/>
    <!--禁止自動識別郵箱-->
    <meta content="email=no" name="format-detection"/>
    <!--iphone中safari私有meta標籤,容許全屏模式瀏覽,隱藏瀏覽器導航欄-->
    <meta name="apple-mobile-web-app-capable" content="yes"/>

特殊狀況須要用到的meta標籤

<!-- 啓用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">

若是用的rem。爲了徹底自適應，一般會拿js先控制，而後再用rem，代碼以下：

//動態設置頁面的像素比，達到一比一還原設計稿
var iScale=1;
iScale=iScale/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,' +
    'initial-scale='+iScale+',maximum-scale='+iScale+',minimum-scale='+iScale+'">');
var iWidth=document.documentElement.clientWidth;
document.getElementsByTagName("html")[0].style.fontSize = iWidth/10+"px";

好比720的設計圖紙，h2字體大小36px，寬度400px，那麼能夠這樣寫：

h2{
    font-size: 36/72rem;
    width: 400/72rem;
}

以此類推，這樣就會達到不管在什麼設備上，都是1:1還原了設計圖紙。固然在一些section設置width的時候，也能夠用百分比。這些依照狀況而定。

一些判斷瀏覽器的，判斷設備的，以下：

//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;
        }
    }
}
//JS判斷微信瀏覽器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})

還有另一種：

var browser = {
    versions: function () {
        var u = navigator.userAgent, app = navigator.appVersion;
        return {     //移動終端瀏覽器版本信息
            trident: u.indexOf('Trident') > -1, //IE內核
            presto: u.indexOf('Presto') > -1, //opera內核
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否爲移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1, //是否爲iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.mobile) {//判斷是不是移動設備打開。browser代碼在下面
    var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        //在微信中打開
    }
    if (ua.match(/WeiBo/i) == "weibo") {
        //在新浪微博客戶端打開
    }
    if (ua.match(/QQ/i) == "qq") {
        //在QQ空間打開
    }
    if (browser.versions.ios) {
        //是否在IOS瀏覽器打開
    }
    if(browser.versions.android){
        //是否在安卓瀏覽器打開
    }
} else {
    //不然就是PC瀏覽器打開
}

 

另外

1：微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整以下：

//如下代碼可以使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或百分比佈局

2：移動端 HTML5 input date 不支持 placeholder 問題，能夠設置以下便可解決

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

3：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 src="music/bg.mp3" type="audio/mpeg">
    <!--優先播放音樂bg.ogg，不支持在播放bg.mp3-->
</audio>
<script>
    //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是不會佔據任何空間
</script>

也可用以下方法：先經過用戶 touchstart 觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）

<script>
    document.addEventListener('touchstart', function () {
        document.getElementsByTagName('audio')[0].play();
        document.getElementsByTagName('audio')[0].pause();
    });
</script>

4：取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

5：android上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

6：關於 iOS 端字體的優化(橫豎屏會出現字體加粗不一致等)

-webkit-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 text-size-adjust: 100%;

7：禁止Android和iOS用戶選中文字

html,body {-webkit-user-select:none; user-select: none; }

8：重感力事件：

// 運用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
}

 

9：某些Android手機圓角失效，代碼以下：

{background-clip: padding-box;}

10：關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

this.value = this.value.replace(/\u2006/g, '');

11：打電話發短信寫郵件怎麼實現

<!--1、打電話-->
<a href="tel:0755-10086">打電話給:0755-10086</a>
<!--2、發短信，winphone系統無效-->
<a href="sms:10086">發短信給: 10086</a>
<!--3、寫郵件
注：在添加這些功能時，第一個功能以"?"開頭，後面的以"&"開頭
1.普通郵件-->
<a href="mailto:979976770@qq.com">點擊我發郵件</a>
<!--2.收件地址後添加?cc=開頭，可添加抄送地址（Android存在兼容問題）-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com">點擊我發郵件</a>
<!--3.跟着抄送地址後，寫上&bcc=,可添加密件抄送地址（Android存在兼容問題）-->
<a href="mailto:979976770@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com">點擊我發郵件</a>
<!--4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址-->
<a href="mailto:979976770@qq.com;723661@qq.com">點擊我發郵件</a>
<!--5.包含主題，用?subject=-->
<a href="mailto:979976770@qq.com?subject=郵件主題">點擊我發郵件</a>
<!--6.包含內容，用?body=;如內容包含文本，使用%0A給文本換行-->
<a href="mailto:979976770@qq.com?body=郵件主題內容%0A劇情再美%0A終究是戲">點擊我發郵件</a>
<!--7.內容包含連接，含http(s)://等的文本自動轉化爲連接-->
<a href="mailto:979976770@qq.com?body=http://www.baidu.com">點擊我發郵件</a>
<!--8.內容包含圖片（PC不支持）-->
<a href="mailto:979976770@qq.com?body=<img src='images/1.jpg' />">點擊我發郵件</a>
<!--9.完整示例-->
<a href="mailto:979976770@qq.com;723661@qq.com?cc=alone_haixin@163.com&bcc=723661@qq.com&subject=
[郵件主題]&body=劇情再美終究是戲%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點擊我發郵件</a>

12：手機拍照和上傳圖片

<!--IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持-->
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />

13：美化表單元素的一些css：

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