马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > SEO优化 > 移动端SEO > 关于移动设备页面尺寸参数和viewport的理解

关于移动设备页面尺寸参数和viewport的理解

时间:2016-01-23   文章来源:马海祥博客   访问次数:

刚开始接触移动设备的时候,碰到的最多的就是尺寸和适配的问题,目前网站开发已经更多的转向移动端设计和制作,更多的人开始询问移动端网页宽度多少合适?960px、640px、480px、320px?图片多少宽度适合?比如用640px的图片宽度设置为320px是否比较清晰?

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

为移动设备制作前端页面,往往会遇到很多令人迷惑的情况,本文中,我整理了一些移动设备页面尺寸参数和viewport相关的概念和知识,在此,借助马海祥博客的平台与大家分享一下。

1、设备像素和CSS像素

CSS像素是固定不变的,浏览器上缩放的话,CSS像素会被拉伸或者缩小,设备像素不变。

100%zoom:css像素和设备像素一致

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

zoom被缩放:css像素在设备像素里被缩放

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

2、屏幕尺寸和窗口尺寸

屏幕尺寸和窗口尺寸较好理解,如下图所示:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

但是需要注意的是:当缩放窗口的时候,窗口尺寸更改了,这一点对于后面理解移动端尺寸有一定帮助。

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

解释:当放大页面的时候,窗口尺寸变小了,为什么呢?因为窗口尺寸(window.innerWidth)的定义是窗口里能展现的像素宽高,页面放大了,页面里展现的css像素变少了,所以窗口尺寸变小了,相反缩小页面的时候,窗口尺寸变大了(具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍)。

3、关于手机屏幕的参数

大家经常会听到一些关于手机的技术参数,比如lumia920采用4.5英寸1280×760分辨率的屏幕,PPI高达xxx(具体多少没算)!到底是什么意思呢?

首先,4.5英寸是多大?大家可以看到我自己绘制的一副图(如下图),图中里面那圈是3.5英寸的屏幕大小,外面一圈是4.5英寸的屏幕大小,当然我是以魅族m9的屏幕长宽比基础上放大得到的,实际上,不同手机的分辨率不同会导致屏幕长宽比不一样,但是屏幕面积是固定的,4.5英寸屏幕的面积是3.5英寸的1.7倍。

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

有人会问:这3.5英寸是如何算出来的?答案是量出来的,1英寸=2.54cm,关于英制单位,咱们常用到的还有英尺,1英尺=0.3048m(延伸:4.3英寸是多大?)。

接下来,再跟大家介绍一下手机屏幕的几个参数:屏幕大小、分辨率、PPI,如下图所示:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

还有一个就是大家常所说的ppi,搞打印的应该经常听说这个词,咱们平时打印的纸张好像都是300ppi,乔布斯所说的视网膜屏幕就是指ppi超过300,达到人肉眼无法辨别的程度。

那PPI是什么意思?其实就是指没英寸屏幕上面的像素数,那到底是如何算出来的呢?咱所说的960×640分辨率,其算法就是:根据勾股定理算出对角线的像素数,然后再除以3.5,得出的数就是ppi,根据这个算法,我们可以看出如果要提高ppi,要么是减少屏幕尺寸,要么是增加屏幕分辨率!

咱们电脑显示屏一般的ppi都是在100左右,大家用惯了手机屏幕之后会发现电脑屏幕不堪入目,虽然说手机的高ppi是因为我们是近距离观看,电脑屏幕是远距离观看,但是区别还是挺明显的。

大家的屏幕都可以调节分辨率,分辨率越小,最明显的感觉就是字变大了!反之,字变小了。

一般来说,根据显示器的不同,大多数电脑都可在800×600到1920×1080之间调节,通常情况下,我还是喜欢用高分辨率,这样看起来显得画面更细腻点,主要还是因为ppi比较高,比较适合我这种和电脑坐的比较近的人,现在大部分手机屏幕的ppi都在300以上,电脑和平板以后也是这个趋势。

4、viewport的使用

近年来,随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面简单的跟大家介绍一下viewport的使用问题。

(1)、pc上的viewport

viewport并非是移动端的专利,viewport是浏览器内部的一个数据,它约束html的宽度。

viewport基本等同于窗口尺寸,所以当你缩放窗口的时候viewport会改变,相应的html宽度也会改变。

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

这个例子中,由于放大页面,viewport变小,而页面中的头部蓝条css设置为100%,跟随viewport变化,所以右侧logo暴露了出来,蓝条没有覆盖100%的文档宽度,而只取viewport的宽度。

(2)、移动终端的viewport

移动终端的viewport更加麻烦一些,有两种viewport,分别是展示viewport(visual viewport)和布局viewport(layout viewport)。

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

上面这张图片你可以这么理解:手机是一个放大镜,它游走在页面上,手机上展示的宽高为visual-viewport,而整个页面的宽高是layout-viewport。

好奇的朋友一定会问,为什么要这样呢?何必这么麻烦?这是因为手机的尺寸太小了,“移动浏览器厂商想给它们的客户尽可能的提供最好的体验,这现在指的就是「尽可能的跟桌面一样」,因此耍一些花招是必要的。”

那么,假如我的页面没有经过任何优化,手机默认的layout-viewport是多大呢,“layout viewport有多宽?每个浏览器都不一样,Safari iPhone为980px,Opera为850px,Android WebKit为800px,最后IE为974px。”

这就是为什么普通一个页面在iphone上看会变得很大的原因,iphone默认把你的页面的viewport设置为980px,也就是说html的100%宽度默认为980px。

(3)、现代移动端网页设计与viewport

虽说visual-viewport是为了用户看得更清楚而做的设定,但实际上,这带来了用户体验上的下降,用户往往需要缩放和移动页面,所以现代针对移动端的网页设计(或者响应式设计)通常采用的方法是,精简页面内容,放大视觉元素,避免体验不好的缩放和移动页面,包括boostrap在内的众多前端框架也无不在设计上采用这种解决方案。

要满足这种设计,首先要保证一件事情就是,让layout-viewport就是visual-viewport,消除两个viewport带来的页面差异。

苹果公司推动的的viewport meta可以解决这个问题,viewport的主要作用是指定layout-viewport的大小。

比如:<meta name="viewport" content="width=device-width">这个设定其实就是让layout-viewport和visual-viewport保持一致,回想一下上面那张把手机当做放大镜的图片,有了这个设定以后,手机就不是放大镜了,而是把整个页面装在手机里。

此外,viewport还可以设置initial-scale,user-scalable

5、苹果给的一些例子

关于Viewport,safari的开发官网给了一些例子,可以加深我们对这个问题的理解:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

可以看到决定页面展示效果的两个因素,width和scale,scale类似pc端的放大缩小。

一个默认宽度为100%页面的样子,如下图所示:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

默认宽度 + initial scale = 1.0,如下图所示:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

宽度设为320 + 默认 initial scale,如下图所示:

关于移动设备页面尺寸参数和viewport的理解-马海祥博客

手机浏览器是把页面放在一个虚拟的窗口-viewport中的,通常情况下,这个虚拟的窗口比屏幕宽,这样就不用吧每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),此时虽然显示不完全,但是用户仍可以通过平移和缩放来看网页的内容。

viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。

当然,更加优秀的做法是类似天猫的做法:针对手机端重新进行页面设计、布局,因为手机屏幕毕竟有限,按照web页面等比缩小的方式较之最原始有改进,但是如何在小屏幕上展示最合适的内容给用户的设计才是最贴切的。

不过对于一些没有太多要求的,可以简单的通过viewport实现适配。

马海祥博客点评:

由于手机系统各异,手机的屏幕尺寸五花八门,屏幕的性能也呈现多样性,还有触摸屏和非触屏的区分,这四个变量结合起来,会有无数种不同的情况,如何能使你的应用完美地展现给用户,适配固然很重要,但是,更重要的是你要在适配之前,确定应用的目标群体也很重要啦,一定要选择适合自己的。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/ydseo/1421.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 移动设备   页面尺寸   移动页面  

上一篇:新手如何做移动端网站的SEO优化
下一篇:移动端设备前端开发调试的方法技巧

您可能还会对以下这些文章感兴趣!

  • 移动端手机站做站内优化的要点

    随着移动流量的与日俱增,移动搜索引擎的功能越来越丰富,意味着更多移动特性可以施展,同时也意味着对HTML5网站的要求更趋规范和严格,这对于负责移动站点优化的负责人来说是个极大的挑战,我一般将站内优化的生命周期概括为三个词,实验、评估、调整,因此我的站内优……【查看全文

    阅读:1849关键词: 移动端   手机站   站内优化   日期:2015-11-10
  • 百度移动搜索优化:手机站优化指南

    本文旨在为手机站站长提供官方、明确的搜索引擎优化标准,使站长合理、可持续的提升手机站流量,获得长久、稳定的发展,同时促进整个移动互联网的良性发展。其中移动搜索会优先收录的手机站点为:A、拥有手机用户迫切需要内容资源的手机站点。B、符合手机建站规范的站点……【查看全文

    阅读:2206关键词: 移动搜索优化   移动搜索   手机站优化   优化指南   日期:2014-08-18
  • 提高网站在移动端打开速度的方法技巧

    最近一项研究表明:80%的网民对移动端的浏览体验感到失望,同时,当体验提升时,他们会在智能手机上花费更多的时间,由于64%的智能手机用户希望网站可以在4秒内加载完毕,但一半的网站花费了二倍以上的时间,达到了9秒,为了满足移动用户的高期望,你需要对网站针对移动……【查看全文

    阅读:7817关键词: 网站   移动端   网站速度   日期:2015-03-12
  • 如何优化移动页面中的head标签代码更利于搜索引擎识别

    对于手机网站的首页或者频道首页的网页代码中的keywords、description最好加上与PC端有所区别的meta标签和关键词,在每个页面的关键字及描述像做传统PC端网站一样,做好针对性的填写工作,对搜索结果的展现(摘要)以及优化工作大有帮助,另外确保在手机网站或者PC端网站……【查看全文

    阅读:1326关键词: 页面优化   搜索引擎   日期:2015-08-08
  • 移动设备前端开发中viewport的理论及使用技巧

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备,viewport并非只是ios上的独有属性,在android、winp……【查看全文

    阅读:219关键词: 移动设备   前端开发   日期:2016-04-03
  • PC网站自动适配手机网页的方法技巧

    随着智能手机的不断发展,移动搜索的比例也在不断增加,而传统的PC站点在手机端的用户体验度较差,这就容易流失大量的用户,所以做一个对应的手机站就理所当然,如今手机站已经逐渐成为一种潮流,基本上有点规模的PC站点都会制作相应的手机站,可是在很多方面依然存在一……【查看全文

    阅读:23001关键词: 网站   手机网页   pc站   日期:2015-12-03
  • PC站建立移动端网站的三大方法模式

    移动端网站作为移动互联网最主要的入口,能随时展现自身、与目标用户便捷沟通,同时方便手机用户随时随地查询和浏览,有效占领客户“空闲时间”。移动端网站确实是最便捷的宣传册,无论何时何地,遇见何人,你只要打开手机即可以让对方浏览到产品和服务信息,不会错过任……【查看全文

    阅读:3004关键词: 移动端网站   移动端   pc站   日期:2016-12-07
  • 移动端SEO优化与PC端SEO优化的不同点

    随着移动互联网的快速发展,用户从PC端向移动端迁移的大趋势更加明显,但这也使得移动手机网站的SEO优化工作还处于探索阶段,很多SEO和站长也都有了一些疑问,移动端需要做SEO优化吗?移动端该怎么做SEO优化?我们都知道,移动端与PC端搜索引擎排名算法是不一样,但是优……【查看全文

    阅读:931关键词: 移动端seo   seo优化   seo   日期:2015-09-10
  • 移动端网站SEO优化排名的一些注意细节

    俗话说,有搜索的地方就有SEO优化,移动端的SEO优化也逐渐的进入火热化,对于移动端的SEO优化,大家都是处于同一个阶段,就看谁花在这上面的心思更多一些了,在优化移动端网页的时候,越来越多的问题开始出现,在暴露移动端薄弱的同时,也让刚刚进入SEO行业的新人们跟前……【查看全文

    阅读:1980关键词: 移动端   seo优化   seo排名   日期:2015-11-17
  • 手机网站制作的常用方法及优化技巧

    手机网站是指用WML(无线标记语言)编写的专门用于手机浏览的网站,通常以文字信息和简单的图片信息为主。实际上,随着向手机智能化方向发展,安装了操作系统和浏览器的手机的功能和电脑是很相似,使用这种手机可以通过GPRS上网可浏览几乎所有的www网站,无论网站是不是专……【查看全文

    阅读:4273关键词: 手机网站   网站制作   优化方法   优化技巧   日期:2014-10-04
↓ 点击查看更多 ↓

互联网更多>>

  • 移动互联网是什么意思? 移动互联网是什么意思? 移动互联网就是将移动通信和互联网二者结合起来成为一体,是指互联网的技术、平台、商业模式和应用与移动通信……
  • 互联网思维究竟是一种什么样的思维? 互联网思维究竟是一种什么样的思维? 但凡做企业的,不管是创业的还是在互联网冲击下转型升级的传统行业企业家,“互联网思维”已经成为了大家共同……
  • 计算机的开机启动原理 计算机的开机启动原理 计算机从打开电源到开始操作,整个启动可以说是一个非常复杂的过程。总体来说,计算机的整个启动过程分成四个……

SEO优化 更多>>

医疗行业开展品牌推广急需解决的10大问题 如何以一个用户的角度来做企业门户网站