现在移动互联网正搞得风生水起,大伙也不甘示弱,周围的朋友会经常从微信里面发发图片,设计师们也经常制作移动网站和手机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;。