手机浏览器都是按照什么分辨率解析移动端网页的-阿里云开发者社区

开发者社区> 范大脚脚> 正文

手机浏览器都是按照什么分辨率解析移动端网页的

简介:
+关注继续查看

无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等.

本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议.

在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读”移动端网页开发基础”.

各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句:

<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的机型,但是被我忽略掉了.

可以下一个大概的结论:

  1. 开发移动端网页,非必要情况下不对于页面设置宽度,只需加上margin来灵活适应屏幕
  2. 但如果确实有一些板块需要设置宽度,设置为300px即可(左右各留10px边距)
  3. 如果需要兼顾720px的高端机型,需要在css中写入media query来针对不同宽度的屏幕写样式.

本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7193088.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。 第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示: 第二步,最好是电脑和安卓手机都连接了谷歌浏览器 第三步,打开电脑上的谷歌浏览器,调出控制台, 我们点击More tools,再选择 在之后的页面中,如图所示选项必须打对勾。
4647 0
动手做webserver的核心之http解析
简介         webserver往小里说核心功能就是socket管理、url处理、http协议处理、业务dll管理等;下面简介绍一下http协议:超文本传输协议(HTTP)是一种通信协议,当时就是为web传输设计的一个基于tcp的协议;基于这个字面上理解,可以简单的点说就是用tcp来传输文本、数据的一种编解码格式。
1295 0
【资料下载】Python 第六讲——Python爬虫进阶 JS分析—浏览器指纹
直播时间:直播时间:03.07(周四) 20:00——21:00 主讲人 :冷月 —— 阿里特邀技术专家 网络安全工程师, 擅长JS加解密, 风控黑盒分析。用破解的思路, 构建更强的防御。 直播介绍:随着爬虫与反爬竞争愈来愈烈, 验证码和用户登录系统难以继续阻挡爬虫的入侵.
15997 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载