## (1) 简单粗暴 如果我们按照320px宽的设计稿去制作页面,并且不做任何的设置,页面会默认自动缩放到跟手机屏幕相等的宽度(这是由于 medium-dpi是target-densitydpi的默认值,和不同密度对应不同缩放比例所决定的,这一切都是移动设备自动完成的 )。所以这种解决方案,简单,粗暴,有效。但有一个致命的缺点,对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害。 ## (2) 极致完美 在这种方案中,我们采用 target-densitydpi=device-dpi,这样一来,手机设备就会按照真实的像素数目来渲染,用专业的话来说,就是1 CSS pixels = 1 device pixels。比如对于 640*960的 iphone,我们就可以做出 640*960的页面,在iphone上显示也不会有滚动条。当然,对于其他设备,也需制作不同尺寸的页面,所以这种方案往往是使用媒体查询来做成响应式的页面。这种方案可以在特定的分辨率下完美呈现,但是随着要兼容的不同分辨率越多,成本就越高,因为需要为每一种分辨率书写单独的代码。下面举个简单的例子: ~~~ <meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " /> ~~~ ~~~ #header { background:url (medium-density-image.png); } @media screen and (- webkit -device-pixel-ratio:1.5) { /* CSS for high-density screens */ #header { background:url (high-density-image.png);} } @media screen and (- webkit -device-pixel-ratio:0.75) { /* CSS for low-density screens */ #header { background:url (low-density-image.png);} } ~~~ ![](https://box.kancloud.cn/2015-08-02_55bd80ff2ec3a.jpg "viewport") ## (3) 合理折中 针对安卓设备绝大多数是高密度,部分是中密度的特点,我们可以采用一个折中的方案:我们对480px宽的设计稿进行还原,但是页面制却做成320px宽(使用background-size来对图片进行缩小),然后,让页面自动按照比例缩放。这样一来,低密度的手机有滚动条(这种手机基本上已经没有人在用了),中密度的手机会浪费一点点流量,高密度的手机完美呈现,超高密度的手机轻微失真(超高密度的安卓手机很少)。这种方案的优点非常明显:只需要一套设计稿,一套代码(这里只是讨论安卓手机的情况)。