(1)简单粗暴
如果我们按照320px宽的设计稿去制作页面,并且不做任何的设置,页面会默认自动缩放到跟手机屏幕相等的宽度(这是由于medium-dpi是target-densitydpi的默认值,和不同密度对应不同缩放比例所决定的,这一切都是移动设备自动完成的).所以这种解决方案,简单,粗暴,有效.但有一个致命的缺点,对于高密度和超高密度的手机设备,页面(特别是图片)会失真,而且密度越多,失真越厉害.
(2)极致完美
在这种方案中,我们采用target-densitydpi=device-dpi,这样一来,手机设备就会按照真实的像素数目来渲染,用专业的话来说,就是1CSSpixels =1 device pixels.比如对于640*960的iphone,我们就可以做出640*960的页面,在iphone上显示也不会有滚动条.当然,对于其他设备,也需制作不同尺寸的页面,所以这种方案往往是使用媒体查询来做成响应式的页面.这种方案可以在特定的分辨率下完美呈现,但是随着要兼容的不同分辨率越多,成本就越高,因为需要为每一种分辨率书写单独的代码.
(3) 合理折中
针对安卓设备绝大多数是高密度,部分是中密度的特点,我们可以采用一个折中的方案:我们对480px宽的设计稿进行还原,但是页面制做却成320px宽(使用background-size来对图片进行缩小),然后,让页面自动按照比例缩放.这样一来, 低密度的手机有滚动条(这种手机基本上已经没有人在用了),中密度的手机会浪费一点点流量,高密度的手机完美呈现,超高密度的手机轻微失真(超高密度的安卓手机很少).这种方案的优点非常明显:只需要一套设计稿,一套代码(这里只是讨论安卓手机的情况).
时间: 2024-10-24 03:37:00