手机浏览器都是按照什么分辨率解析移动端网页的
2017-07-17 10:23
363 查看
无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等.
本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议.
在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读”移动端网页开发基础”.
各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句:
<meta name=”viewport” content=”width=device-width”>
这句话的意思是使整个浏览器的宽度等于设备屏幕的宽度,但是做完这句初始化之后,浏览器的宽度真的就是屏幕宽度吗?
其实上面这条语句严格说来仅仅适用于分辨率为320×480的iOS设备,如果你在你的网页里写了这条语句,然后又添加了一个宽度为320px的div,你会发现在iPhone 3Gs上,这个div是100%撑满屏幕的
如果你有一台iPhone4(屏幕宽度为640px),同样载入刚才那个页面会发现这个div同样是撑满整个屏幕的,按照这条meta语句,应该将这个div宽度设为640px才会撑满对不对,这就是iPhone4+特殊的解析机制
iPhone4+在解析网页的时候依旧把自己当作一台横向分辨率为320px的设备
但是在屏幕上显示的时候,会将尺寸扩大两倍,以前320个像素,在屏幕上会自动扩充为640个,这样就省去了根据两种iPhone开发两种尺寸网页的麻烦
这样的话在iPhone上开发移动端网页就非常简单了,但到目前为止我们仅仅解决了一个平台的问题
Android平台怎么办,所以,我又测试了android手机端浏览器解析的情况,由于设备所限,我只测试了宽度为480的moto里程碑2,小米,还有宽度为720的Galaxy Nexus.
结果比较意外,本以为小米等主流宽度为480px的手机的dvice-width是480px,但是当我还是加载刚才那个网页时,320px的div很好的撑满了屏幕,这样看来其实即使宽度为480px的android手机也是按照320px来解析,只是显示上与iPhone4+不同,自动扩大为1.5倍.
然后又测试了Galaxy Nexus,这款手机屏幕宽度是720px,本想也是按照320px来解析,但事实证明不是,经过我的调试,这款手机是根据360px来解析的,正好是720px的一般.
看来,除了屏幕宽度大于640px的手机,只要是低于640px的都可以认为是按照320px来解析网页,给开发带来很大便利.现在720px的手机比较少,所以可以暂时仅仅开发320px宽度的网页.
条件所限,没有测试宽度为540px的android手机,当然android中也有宽度为240px的机型,但是被我忽略掉了.
可以下一个大概的结论:
开发移动端网页,非必要情况下不对于页面设置宽度,只需加上margin来灵活适应屏幕
但如果确实有一些板块需要设置宽度,设置为300px即可(左右各留10px边距)
如果需要兼顾720px的高端机型,需要在css中写入media query来针对不同宽度的屏幕写样式.
Posted in: 业界文档 Tagged: android, css, html, iOS, webapp, 移动浏览器, 移动网页
本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议.
在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读”移动端网页开发基础”.
各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句:
<meta name=”viewport” content=”width=device-width”>
这句话的意思是使整个浏览器的宽度等于设备屏幕的宽度,但是做完这句初始化之后,浏览器的宽度真的就是屏幕宽度吗?
其实上面这条语句严格说来仅仅适用于分辨率为320×480的iOS设备,如果你在你的网页里写了这条语句,然后又添加了一个宽度为320px的div,你会发现在iPhone 3Gs上,这个div是100%撑满屏幕的
如果你有一台iPhone4(屏幕宽度为640px),同样载入刚才那个页面会发现这个div同样是撑满整个屏幕的,按照这条meta语句,应该将这个div宽度设为640px才会撑满对不对,这就是iPhone4+特殊的解析机制
iPhone4+在解析网页的时候依旧把自己当作一台横向分辨率为320px的设备
但是在屏幕上显示的时候,会将尺寸扩大两倍,以前320个像素,在屏幕上会自动扩充为640个,这样就省去了根据两种iPhone开发两种尺寸网页的麻烦
这样的话在iPhone上开发移动端网页就非常简单了,但到目前为止我们仅仅解决了一个平台的问题
Android平台怎么办,所以,我又测试了android手机端浏览器解析的情况,由于设备所限,我只测试了宽度为480的moto里程碑2,小米,还有宽度为720的Galaxy Nexus.
结果比较意外,本以为小米等主流宽度为480px的手机的dvice-width是480px,但是当我还是加载刚才那个网页时,320px的div很好的撑满了屏幕,这样看来其实即使宽度为480px的android手机也是按照320px来解析,只是显示上与iPhone4+不同,自动扩大为1.5倍.
然后又测试了Galaxy Nexus,这款手机屏幕宽度是720px,本想也是按照320px来解析,但事实证明不是,经过我的调试,这款手机是根据360px来解析的,正好是720px的一般.
看来,除了屏幕宽度大于640px的手机,只要是低于640px的都可以认为是按照320px来解析网页,给开发带来很大便利.现在720px的手机比较少,所以可以暂时仅仅开发320px宽度的网页.
条件所限,没有测试宽度为540px的android手机,当然android中也有宽度为240px的机型,但是被我忽略掉了.
可以下一个大概的结论:
开发移动端网页,非必要情况下不对于页面设置宽度,只需加上margin来灵活适应屏幕
但如果确实有一些板块需要设置宽度,设置为300px即可(左右各留10px边距)
如果需要兼顾720px的高端机型,需要在css中写入media query来针对不同宽度的屏幕写样式.
Posted in: 业界文档 Tagged: android, css, html, iOS, webapp, 移动浏览器, 移动网页
发表评论
电子邮件地址不会被公开。 必填项已用*标注相关文章推荐
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
- js 判断访问端是否是手机移动端和什么浏览器
- user-scalable=no 控制手机版浏览器网页分辨率
- js 判断访问端是否是手机移动端和什么浏览器
- 网页语言有html,php.jsp,无论什么语言浏览器总是能正常显示,这个解析工作是浏览器完成的吗?
- ARM处理器全解析:A8/A9/A15都是什么?
- 浏览器对网页的两种(三种)解析模式quirks mode、strict mode (Almost Standards Mode)
- ARM处理器全解析:A8/A9/A15都是什么?
- 网页自适应不同浏览器和分辨率
- 浏览器加载渲染网页过程解析--总结(转载)
- 当我们打开一个网页,浏览器做了什么?
- 如何阻止移动设备(手机,pad)浏览器双击放大网页?
- 把 Script 标签 放在页面的最底部的 body 封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?
- 手机的内核版本、基带版本等都是什么意思?
- Activity的用法(三):开启网页 (没有弹出浏览器,不清楚是什么原因)
- 从浏览器输入URL到网页加载完成,发生了什么?
- web前端工程师在移动互联网时代里的地位问题 为啥C/S系统在PC端没有流行起来,却在移动互联网下流行了起来 为啥移动端的浏览器在很多应用里都是靠边站,人们更加倾向于先麻烦自己一下,下载安装个客户端APP
- 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器?
- JavaScript 全面解析各种浏览器网页中的JS 执行顺序
- JavaScript 全面解析各种浏览器网页中的JS 执行顺序