开端
- 移动互联网的特点
- 移动浏览器
- 移动web与 原生app
- 分辨率
移动互联网的特点
“小巧轻便”及“通讯便捷”两个特点,它决定了移动互联网与PC互联网的根本不同之处,
移动浏览器
移动浏览器包括内置浏览器、可下载浏览器、代理浏览器以及WebView
移动web与 原生app
移动web开发周期短但是对硬件设备的调用很弱
而原生app刚好相反
分辨率
分辨率是指屏幕图像的精密度,是指显示器所能显示的像素的多少。如940*680表示该屏幕横向有940个像素点,纵向有680个像素点。
- 屏幕尺寸
- 屏幕对角线的长度
- 单位英寸,1英寸等于2.54厘米
像素分为三种:
- 设备像素
- 设备独立像素
- CSS像素
设备像素
又称物理像素,它表示显示设备的真实像素。从一开始就固定,它表示该屏幕上有多少个像素点。即手机的屏幕大小的分辨率表示。
设备独立像素
设备独立像素的出现是为了实现屏幕的分辨率(即物理像素)不一致而造成的的布局不一致。它只是为了让同一个图片或布局在不同的屏幕下显示的大小一样。如iPhone3的物理像素是 320 * 480,设备独立像素为 320 * 480,iPhone4的设备像素为 640 * 960,设备独立像素为320*480,为了让同一个图片或布局在不同的屏幕下显示的大小一样,因此我们用设备独立像素来设置图片大小。
设备独立像素也是可以设置的,但是没人闲着没事去设置它,所以在没有缩放的情况下,设备独立像素可以等同于CSS像素。
设备独立像素可以由如下代码获取:
screen.width //宽度
screen.height //高度
CSS像素
CSS像素是web编程的概念,用于逻辑上衡量像素的单位,也就是我们做网页时用到的像素,是抽象的,不是实际存在的。我们看到的图片的缩小和放大就是css像素在变化。它变化的原理是,当图片放大一倍时,一个css像素 = 2个设备独立像素或等于多少个设备像素 的,所以图片的一个像素占了2个设备独立像素。相对来说在屏幕中占的面积就变大了。
总结:所以css像素是设备独立像素的倍数,而设备独立像素又是设备像素的倍数。