移动端不同于pc端,移动端的设备众多,不能将长宽高写为固定的宽高,那样的话在不同长宽高比的移动设备上就会显示差距较大,在移动端网页布局的显示不能追求完全的一致,只能是差距不大即可,这是有移动设备的种类繁多决定的。
比较好的布局原则是留白固定,宽高不可固定。
Viewport:
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width:控制 viewport 的大小,可以指定的一个值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
initial-scale: 第一次加载时候的缩放值
maximum-scale:页面最大缩放的比,为1表示页面不可放大。
minimum-scale:允许用户缩放到的最小比例。
主流webapp的设置:
<meta name="viewport" content="width=device-width, init
ial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
表示故意舍弃viewport,不缩放页面
DPI:(每英寸点数)
物理像素: 个数是固定的,这是厂商在出厂时就设置好了的—— 一个设备的分辨率是固定的.
在viewport中,获取到的,比如”width-device”,是逻辑像素。所以之前viewport的默认值,所比对的大小,其实是逻辑像素的大小,而非物理像素的大小。
以iphone6为例
分辨率:1334*750
在不做任何缩放的条件下,iphone6的获取到的’width-device’为375px,由此知设备像素比为2.
PPI一定比DPI大,不会小!!
media
<link rel="stylesheet" href="xxx.css" media="screen and (max-device-width: 480px)">
screen表示用于有屏幕的设备,
max-device-width表示屏幕的最大宽度。
上面语句表示:如果加载该页面的设备的屏幕小于480像素,就应用xxx.css式样
参考: