移动web开发笔记（1）

来源：互联网发布：简述单片机的发展趋势编辑：程序博客网时间：2024/05/15 18:42

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上完全显示吗？

<!DOCTYPE html><html><head><title></title><meta charset="UTF-8"><style type="text/css">body{padding: 0;margin: 0;}div{width: 320px;height: 568px;background: red;}</style></head><body><div></div></body></html>

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

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

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

3、手机视口

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

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

改变布局视口：

如<meta name="viewport" content="width=640px">

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

这样div就可以完全显示了

由于每个设备的可见视口宽度不尽相同，为了方便可以设置<meta name="viewport" content="width=device-width">，它的意思是，把手机浏览器的布局视口的宽度，更改为当前设备的宽度。

通常我们可能这样设置

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

0 0