在桌面电脑端,浏览器的分辨率与电脑屏幕的分辨率是一致的。而智能手机的屏幕分辨率往往和手机浏览器分辨率不同,因为手机的屏幕相对来说比较小,如果要显示高清画质,那么它的分辨率就要高。比如说,苹果iPhone4手机的屏幕分辨率是640*960,而其自带的Safari浏览器的分辨率却只有320*480。所以,我们在用HTML5+CSS3开发移动网站和移动应用时,就要注意了。admin管理员组文章数量:1564204
假设,我们现在要针对苹果iPhone4开发一个移动网站以及一个移动应用,在做移动网站时,我们这样写样式:
1 | @media screen and( min-width : 320px )and ( max-width : 480px ){ |
2 | |
3 | } |
1 | @media screen and(min-device- width : 640px )and (max-device- width : 960px ){ |
2 | |
3 | } |
min-device-width和max-device-width:表示手机屏幕显示的最小宽度和最大宽度
也就是说,如果我们用HTML5开发,最后要封装成应用,那么我们在开发时,要查询的是手机屏幕的分辨率;如果只是开发移动网站,那么我们需要知道的是各手机浏览器的分辨率。
我们可以通过如下代码检测所用的浏览器的分辨率:
- <</span>script
type='text/javascript'> - document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight
); - document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);
- </</span>script>
手机不同浏览器分辨率分区响应式设计css代码:
- @media
screen and (min-width: 320px){ - ....................................
- }
- @media
screen and (min-width: 241px) and (max-width: 320px){ - ...................................
- }
- @media
screen and (min-width: 1px) and (max-width: 240px){ - ..................................
- }
版权声明:本文标题:HTML5移动开发:手机屏幕分辨率和手机浏览器分辨率 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727473200a1116291.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论