当前位置:首页 > 建站常识 > 列表

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

点击:时间:2017/4/12关键词:HTML5 网站自适应 芜湖网页设计
在桌面电脑端,浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同,因为手机的屏幕相对来说比较小,如果要显示高清画质,那么它的分辨率就要高。比如说,苹果iPhone4手机的屏幕分辨率是640*960,而其自带的Safar
手机屏幕分辨率和手机浏览器分辨率

在桌面电脑端,浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同,因为手机的屏幕相对来说比较小,如果要显示高清画质,那么它的分辨率就要高。比如说,苹果iPhone4手机的屏幕分辨率是640*960,而其自带的Safari浏览器的分辨率却只有320*480。所以,我们在用HTML5+CSS3开发移动网站和移动应用时,就要注意了。

假设,我们现在要针对苹果iPhone4开发一个移动网站以及一个移动应用,在做移动网站时,我们这样写样式:

@media screen and (min-width:320px) and (max-width:480px){}

而在做移动应用时,我们得这样写样式:

@media screen and (min-device-width:640px) and (max-device-width:960px){}

min-width和max-width:表示手机浏览器的最小宽度和最大宽度

min-device-width和max-device-width:表示手机屏幕显示的最小宽度和最大宽度

也就是说,如果我们用HTML5开发,最后要封装成应用,那么我们在开发时,要查询的是手机屏幕的分辨率;如果只是开发移动网站,那么我们需要知道的是各手机浏览器的分辨率。

我们可以通过如下代码检测所用的浏览器的分辨率:

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

预约建站
免费提供网站优化
领取关键词