[HTML5]手機屏幕分辨率和瀏覽器分辨率

在使用CSS3的中有以下相似代碼

Html代碼

1. @media screen and (max-width:480px)｛
2.     ……
3. ｝

 

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

 

Js代碼

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

 

Html代碼

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

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

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

Html代碼

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

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

 

有不當還請指教。

 

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

有用的JS檢測代碼：

Js代碼

1. /*
3.  * 智能機瀏覽器版本信息:
5.  *
7.  */
9. var browser = {
11.     versions : function() {
13.         var u = navigator.userAgent, app = navigator.appVersion;
15.         return {//移動終端瀏覽器版本信息
17.         trident : u.indexOf('Trident') > -1, //IE內核
19.         presto : u.indexOf('Presto') > -1, //opera內核
21.         webKit : u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
23.         gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
25.         mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否爲移動終端
27.         ios : !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/), //ios終端
29.         android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器
31.         iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器
33.         iPad : u.indexOf('iPad') > -1, //是否iPad
35.         webApp : u.indexOf('Safari') == -1
36.     //是否web應該程序，沒有頭部與底部
38.     };
40. }(),
42. language : (navigator.browserLanguage || navigator.language).toLowerCase()
44. }