现在移动互联网正搞得风生水起,大伙也不甘示弱,周围的朋友会经常从微信里面发发图片,设计师们也经常制作移动网站和手机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;。
相关推荐
html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸的手机适配问题
android安卓使用九宫格9patch图技术制作适应所有手机屏幕大小的自适应屏幕大小的app
intraweb自动适应移动端各种屏幕尺寸方法。实际效果:经过测试,自动适应移动端各种屏幕尺寸。能够自动放大、缩小,界面不移动。
android安卓开发app如何做到自适应手机屏幕大小,适应不同分辨率的手机.zip
WinCC flexible中,当改变屏幕分辨率(可能是宽屏)时如何防止画面和画面中的对象自动适应屏幕大小?
MFC 窗口适应屏幕大小,控件适应窗口大小。...我的最初想法是,我在oninit获取屏幕大小,然后调用窗口显示函数设置起点为0,0,窗口大小为屏幕长和宽,试了一下,可以,但不知道还有没有更简单方法或者有什么隐形bug。
主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文...
html,屏幕适应,logo屏幕适应
Android如何自适应多种屏幕手机就是用多种方法实现
使用swiper插件,实现轮播效果,banner自适应各种屏幕和手机大小
图片自适应 等比例缩放(手机端,电脑端都可以!)
qt 界面适应多屏幕显示,首先获取几个显示器,然后根据当前显示器的分辨率,调整界面显示,还可以得到缩放比例等
自适应屏幕html页面,用于手机wap开发,很不错的例子
jQuery.flexslider图片插件自适应屏幕大小带缩略图
亲测通过 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
1.适合逻辑简单页面,多端应用。 2.电脑pc,平板ipad,手机等不同大小屏幕共用一套前端代码。 3.适合纯新手学习,作为资料查阅。
本文将介绍芯片级尺寸的MCU如何适应可穿戴设计中的尺寸限制
lcd驱动的c源文件 可以用在mtk的工程文件中能适应各种屏幕
多张图片转pdf,图片大小适应页面,使用jar包itext-asian(5.2.0),itextpdf