移动web开发笔记(1)

1、像素

px:css pixels 逻辑像素,css像素是浏览器所使用的抽象单位,这个像素就是我们指的网页布局和样式定义所使用的像素

dp:device independent pixels 设备独立像素,可以理解为设备像素,设备像素devicepixels)是指与硬件设备直接相关的像素,是真实的屏幕设备中的像素点。比如说,一个电脑显示器的参数中,最佳分辨率是1920x1080,那么指的就是这个显示器在屏幕上用于显示的实际像素点,也就是设备像素。

       css像素和设备像素之间是一种可变的转化关系。在100%缩放比例下,1个css像素等于1个设备像素。在表示某一数目的css像素时,在放大状态下使用了更多的设备像素,而在缩小状态下使用了更少的设备像素。这就是css像素和设备像素的概念。

pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用

dpr :devicePixelRatio 设备像素缩放比

ppi :   表示每英寸所拥有的像素数目,ppi值越高图像越清晰

例如:iphone5的主屏尺寸:4英寸 ,主屏分辨率:1136x640  , (1136²+640²)/4 = 326ppi,所以像素屏幕像素密度:326ppi

iphone5的像素为320px * 568px

换算公式   1px = (dpr ²)*dp

320px * 568px = 1136dp x 640dp = 4 * (320*568)

iphone5的dpr为2 ,320px

默认像素比:

                                 ldpi        mdpi        hdpi         xhdpi

ppi                           120        160           240          320

默认缩放比 dpr       0.75       1.0            1.5            2.0

2、问题:640px*568px的div能在iphone5上完全显示吗?




	
	
	


	

可以看到640px*568px的div根本不能在iphone5上完全显示

从谷歌模拟器可以看到,iphone5的像素为:320 x 568,像素比为2,那为什么不能完全显示呢?

是因为浏览器有一个默认的浏览器视口(viewport),这个视口宽度一般为980px,图片的标尺中也显示了这个视口宽度

3、手机视口

viewport,视口,指的是浏览器窗口中用来显示网页的区域,手机视口分为了:可见视口visualviewport)和布局视口layout viewport

可见视口是指当前在手机屏幕上显示的部分,布局视口用于元素布局和尺寸计算,而且可以比可见视口要更宽。无论你缩放,或者滑动页面,甚至翻转手机屏幕,布局视口始终不变。

改变布局视口:

这里的width就是布局视口的宽度,如设置width=640px

这样div就可以完全显示了

由于每个设备的可见视口宽度不尽相同,为了方便可以设置,它的意思是,把手机浏览器的布局视口的宽度,更改为当前设备的宽度。


通常我们可能这样设置

 intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放,maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,maximum-scale用户可将页面放大的倍数,1.0将禁止用户放大到实际尺寸之上。user-scalable:是否可对页面进行缩放,no 禁止缩放 



你可能感兴趣的:(学习笔记)