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

简介:

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

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

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

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

<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,如需转载请自行联系原作者
相关文章
|
2月前
|
数据采集 开发者 Python
Python爬虫实战:利用Beautiful Soup解析网页数据
在网络爬虫的开发过程中,数据解析是至关重要的一环。本文将介绍如何利用Python的Beautiful Soup库来解析网页数据,包括解析HTML结构、提取目标信息和处理特殊情况,帮助开发者更好地实现爬虫功能。
|
5月前
|
Python
python解析网页,正则表达式
python解析网页,正则表达式
47 0
|
3月前
|
JavaScript 前端开发
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
|
5月前
|
缓存 网络协议
DNS中电脑网址能打开,用手机浏览器不行,需要解析什么?
DNS中电脑网址能打开,用手机浏览器不行,需要解析什么?
40 1
|
6月前
|
Java Maven
在Java中,我们可以使用Jsoup库来解析和分析网页
在Java中,我们可以使用Jsoup库来解析和分析网页。以下是一个简单的示例,演示如何使用Jsoup库获取网页的标题
43 1
|
2月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
129 0
|
12天前
|
数据采集 XML 数据处理
Python爬虫实战:利用BeautifulSoup解析网页数据
本文将介绍如何利用Python中的BeautifulSoup库来解析网页数据,帮助读者更好地开发爬虫程序,实现自动化数据采集与处理。
|
24天前
|
域名解析 弹性计算 缓存
DNS问题之无法通过域名访问如何解决
DNS服务器是负责将域名转换为IP地址的服务,它是互联网上实现域名解析的关键基础设施;本合集将探讨DNS服务器的工作原理、配置方法和常见问题处理,帮助用户理解和优化DNS服务的使用。
43 2
|
1月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
20 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
2月前
|
Web App开发 存储 前端开发
Chrome 浏览器的隐身窗口(incognito window)功能解析
Chrome 浏览器的隐身窗口(incognito window)功能解析
63 0

相关产品

  • 云迁移中心
  • 推荐镜像

    更多