手机图片到底要做多宽才可以适应所有手机屏幕的尺寸？

阅读更多

现在移动互联网正搞得风生水起，大伙也不甘示弱，周围的朋友会经常从微信里面发发图片，设计师们也经常制作移动网站和手机APP等，这些过程中大家都会碰到这样一个问题：手机图片到底要做多宽才可以适应所有手机屏幕的尺寸？

    最终得出的结果是：想高清显示图片做成1080px通吃所有机型，想节约用户流量图片做成540px通吃所有机型，智威科技从手机分辨率和常用手机机型分析如下：

 

一、分辨率：(长*宽)

[4:3]    

VGA     640*480 (VideoGraphics Array)

QVGA    320*240(Quarter VGA)

HVGA    480*320(Half-size VGA)

SVGA    800*600 (SuperVGA)

[5:3]

WVGA    800*480 (WideVGA)

[16:9]

FWVGA   854*480 (FullWide VGA)

HD      1920*1080 HighDefinition

QHD     960*540

[标清高清]

720p    1280*720  标清

1080p   1920*1080 高清

 

二、常用机型

[iOS]

iphone 4/4s    960*640

iphone5(s)     1136*640

iphone6        1704×960

 

[Android]

note2          1280*720

三星9220       1280X800

note3          1920x1080

三星galaxy s4  920x1080

小米1          854*480

小米2          1280*720  标清

小米3(s)       1920*1080 高清

 

 

三、建议手机图片制作宽度：

   由上面的分析可见：

   1.苹果最大的分辨率宽度是960px，所以图片宽度建议制作成960px（480px）、640px（320px）和就可以适应所有苹果手机，括号中的宽度代表图片做成实际像素的二分之一大小也可以正常显示。如果图片清晰度要求高960px通吃，要求不高480px通吃。

   2.安卓最大的分辨率宽度是1080px，所以手机图片的宽带建议制作成1080px（540px） 800px（400px） 720px（360px） 480px（240px），括号中的宽度代表图片做成实际像素的二分之一大小也可以正常显示。如果图片清晰度要求高1080px通吃，要求不高540px通吃。

    结论:如果想通吃全部机型，想高清显示1080px，想节约用户流量540px，用CSS让图片自适应宽度就ok。CSS让其自适应宽度写法：width:100%;text-align:center;。