最新消息:ocsen.wang域名正式启用了!

多终端Web的一些名词

Html-Css ocsen 643浏览

CSS pixels

浏览器使用的抽象单位, 主要用来在网页上绘制内容。

device pixels

显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。两者之间的换算公式:

CSSpixels=devicePixelRatio2×devicepixels

 

PPI/DPI(devicePixelRatio)

每英寸所拥有的像素(pixel)数目,下面为计算公式(有误差):

CSSpixels=deviceWidth2+deviceHeight2−−−−−−−−−−−−−−−−−−−−−−−−−√inch

 

名称 ldpi mdpi hdpi xhdpi
密度分界 120 160 240 320
常见屏幕尺寸 240*320 320*480 480*800 640*960
默认缩放比例 0.75 1.0 1.5 2.0

viewport

 viewport,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一般都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。他有以下几个属性

  • width 控制 viewport 的大小,一般为了自适应设置为device-width
  • height 一般为了自适应设置为device-height
  • target-densitydpi 设备的默认缩。打个比方说,一张320*480的图片,放在iphone4里面,默认是占满屏幕的,但如果定义了target-densitydpi=device-dpi,那么图片只占屏幕的四分之一(二分之一的平方),因为iphone4的默认缩放比例为2(查上表)。他可以设置的之如下:
    • low-dpi – 使用ldpi作为目标 dpi。中等像素密度和高像素密度设备相应放大
    • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
    • device-dpi 使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
    • high-dpi 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小
  • initial-scale 初始缩放,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现
  • maximum-scale 最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。
  • user-scalable 用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。

常见viewport设置

<meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

转载请注明:Ocsen-因上努力,果上随缘 » 多终端Web的一些名词

111