手機屏幕分辨率和瀏覽器分辨率

  意思是在最大寬度爲480px的設備上應用{}裏面的樣式。這裏的width，注意是手機瀏覽器的分辨率，而不是手機設備的屏幕分辨率。好比蘋果4的手機屏幕分辨率是960x640。而其自帶的Safari瀏覽器的分辨率是320*480。咱們能夠經過以下代碼檢測所用的瀏覽器的分辨率：

 

$("#info").html("(您的瀏覽器的分辨率爲："+($(document).width()+"*"+$(document).height())+")");

 

<div id="info"></div>

    在不少的Android設備上，系統自帶的瀏覽器，chrome瀏覽器，QQ瀏覽器，UC等，通過測試得出的值都不太同樣。這就給手機WEB開發帶來了複雜度。一樣在桌面瀏覽器中測試也會不一樣。

    咱們在針對手機進行WEB開發時，一般會在head中加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    這裏的device-width也是值所使用的瀏覽器的width，而非手機自己。

 

======================分割線===========================

    有用的JS檢測代碼：

/*
            
 * 智能機瀏覽器版本信息:
            
 *
            
 */

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.*/) || !!u.match(/AppleWebKit/), //是否爲移動終端

        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 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器

        iPad : u.indexOf('iPad') > -1, //是否iPad

        webApp : u.indexOf('Safari') == -1
    //是否web應該程序，沒有頭部與底部

    };

}(),

language : (navigator.browserLanguage || navigator.language).toLowerCase()

}