手机屏幕分辨率和浏览器分辨率

在使用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. /* 
2.              
3.  * 智能机浏览器版本信息: 
4.              
5.  * 
6.              
7.  */  
8.   
9. var browser = {  
10.   
11.     versions : function() {  
12.   
13.         var u = navigator.userAgent, app = navigator.appVersion;  
14.   
15.         return {//移动终端浏览器版本信息   
16.   
17.         trident : u.indexOf('Trident') > -1, //IE内核  
18.   
19.         presto : u.indexOf('Presto') > -1, //opera内核  
20.   
21.         webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
22.   
23.         gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核  
24.   
25.         mobile : !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端  
26.   
27.         ios : !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X)/), //ios终端  
28.   
29.         android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器  
30.   
31.         iPhone : u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器  
32.   
33.         iPad : u.indexOf('iPad') > -1, //是否iPad  
34.   
35.         webApp : u.indexOf('Safari') == -1  
36.     //是否web应该程序，没有头部与底部  
37.   
38.     };  
39.   
40. }(),  
41.   
42. language : (navigator.browserLanguage || navigator.language).toLowerCase()  
43.   
44. }  

转载自：http://www.iteye.com/topic/1130537

转载于:https://www.cnblogs.com/linyongqin/articles/3621106.html