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

在使用CSS3的中有如下类似代码

    意思是在最大宽度为480px的设备上应用{}里面的样式。这里的width，注意是手机浏览器的分辨率，而不是手机设备的屏幕分辨率。比如苹果4的手机屏幕分辨率是960x640。而其自带的Safari浏览器的分辨率是320*480。我们可以通过如下代码检测所用的浏览器的分辨率：

Js代码

1. <script type='text/javascript'>  
   
2. document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight );  
   
3. document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);  
   
4. </script>

复制代码

    在很多的Android设备上，系统自带的浏览器，chrome浏览器，QQ浏览器，UC等，经过测试得出的值都不太一样。这就给手机WEB开发带来了复杂度。同样在桌面浏览器中测试也会不同。

    我们在针对手机进行WEB开发时，通常会在head中加入：

Html代码

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

    这里的device-width也是值所使用的浏览器的width，而非手机本身。

    有不当还请指教。

检测华为荣耀8手机，显示浏览器分辨率是980*1298，屏幕分辨率是360*640。华为7寸平板X1 7.0，显示浏览器分辨率是980*1251，屏幕分辨率是480*768。