码迷,mamicode.com
首页 > 移动开发 > 详细

移动篇 视口viewport

时间:2015-05-18 12:36:44      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

  最近在看奇舞团新书<<移动WEB手册>>,心得如下:

  在WEB的响应式设计出来之前,如果直接在手机设备上显示针对PC端的网站,因为屏幕的分辨率很小,往往出现的是横纵方向的滚动条,而且字体很小。为了更好的显示效果,就需要将网站针对小屏幕做出相应的适配。

  布局视口:在移动端浏览器,网站所展现的界面宽度、样式;

  视觉视口:在移动端浏览器,用户通过手机可以看到网站界面,可以是全部、也可以是部分(有横纵滚动条)。

  最优的效果是将布局视口局限在视觉视口中,限制横向滚动条的出现,比如:在Retina出现之前,手机屏幕的分辨率在320px/480px,可以针对这种分辨率级别的设备来适配网站设计;但是后来Retina出现带来的问题就是设备屏幕的物理尺寸没有发生变化,但是分辨率变了,从320X480变为640X960,这就使得如果根据分辨率来调整网站的开发方式是失败的。

  同时Retina出现的本身目的是说:将原来1个像素显示的屏幕替换为相应的4个,横纵方向变成原来2倍,以此达到高清的效果。因此640X960物理像素的屏幕,网站仍然应该以320X480CSS像素的效果来展示,这样CSS像素就成为了相对单位:

  物理像素:硬件屏幕设备实际的横纵方向的点阵的基本单位,由硬件决定;

  CSS像素:网站设计方面的基本单位,WEB设计开发人员无需关心硬件级别适配,只需按照CSS像素方式的设计布局即可。

  由此新的名词产生:设备像素比DPR(Device Pixel Ratio),指的是:CSS像素与物理像素的比,也可以看做是:屏幕物理像素大小(640X960物理像素)与理想视口大小(320X480CSS像素)的比。DPR也可以是小数,如1.5。

 

  分辨率有两个单位:

  dpi:每英寸点数(Dots per inch),这里的点数指的是像素的个数,针对于屏幕,这个值相对固定,如:96。以此来计算:分辨率 = 96dpi * inch_size;

  dppx: 每像素点数(Dots per pixel),这个单位不被广泛支持,在DPR=2的屏幕上来计算:分辨率 = (96dpi * DPR) * inch_size;

 

  DPR与分辨率的关系:

  分辨率reslution与DPR描述的实际上是一个东西,只是站在不同角度上看待的,由于前者在移动端支持的不太好,所以DPR成为事实上的标准,而被普遍支持。以后的移动端开发都已DPR作为参考来述说。

 

  meta中的viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  device-width就是以物理像素计算的屏幕宽度,如:DPR为2,理想视口为320X480的屏幕,宽度为640;

  width=device-width: 将宽度设定为物理像素的宽度,然后通过媒体查询中的DPR=2来适应;

  

 

移动篇 视口viewport

标签:

原文地址:http://www.cnblogs.com/diydyq/p/4511482.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!