`
xllily
  • 浏览: 120916 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多

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

 

分享到:
评论

相关推荐

    Android针对不同的手机屏幕大小设计图片资源与编码

    这里主要涉及几个关键概念:屏幕尺寸、屏幕密度、分辨率、DP(密度无关像素)、屏幕长宽比以及Android资源文件的组织。 1. **屏幕尺寸**:根据屏幕的对角线长度,Android将屏幕尺寸分为small、normal、large和extra...

    html图片自适应手机屏幕大小的css写法

    针对给定文件提供的内容,我们将详细探讨在HTML中使用CSS实现图片自适应手机屏幕大小的方法。以下内容将涵盖相关的知识点,包括CSS属性、选择器、以及与响应式设计相关的概念。 首先,我们注意到文件中提供了一段...

    手机电脑端图片只适应.rar

    总之,“手机电脑端图片只适应”这个主题涵盖了图片在多设备环境下的优化,涉及到响应式设计、等比例缩放、媒体查询和前端框架的应用。掌握这些技术,可以提升用户在不同设备上的浏览体验,是现代网页和移动应用开发...

    Android应用源码获取手机屏幕尺寸的代码段-IT计算机-毕业设计.zip

    在获取到屏幕尺寸后,开发者可以在运行时动态调整布局,以适应不同尺寸的屏幕。例如,使用`LinearLayout.LayoutParams`或`RelativeLayout.LayoutParams`改变控件的大小和位置。 8. **Android Studio工具**: ...

    手机端图片只适应.rar

    标题“手机端图片只适应.rar”暗示了这个压缩包包含了一个解决方案,旨在确保图片在不同屏幕尺寸下能正确显示。描述中提到的CSS样式优先级概念是实现这一目标的关键。 首先,我们需要理解CSS(Cascading Style ...

    手机开发图片处理小程序

    本文将深入探讨如何在手机开发中有效地处理图片,特别是利用`ImageUtil`类中的方法来实现图片的缩放功能,确保图片在不同屏幕尺寸上都能以合适的方式展示。 首先,我们了解手机屏幕的多样性。不同的设备具有不同的...

    jQuery手机字体和图片自适应

    1. 设置图片宽高比:通过CSS的max-width: 100%和height: auto属性,图片会根据其父容器的宽度自适应,保持原有比例。 2. 图片懒加载:使用jQuery的lazyload插件,只在图片进入视口时加载,减少页面初次加载时间。 3....

    关于自适应屏幕方向和大小的一些经验.doc.zip

    10. **测试与迭代**: 设计完成后,务必在多种设备和屏幕尺寸上进行测试,以确保自适应性。持续收集用户反馈并进行优化,以提升整体的用户体验。 11. **移动优先策略**: 开发时,首先考虑最小的屏幕尺寸,即移动设备...

    手机版网页图片瀑布流

    2. 响应式设计:为了适应不同设备的屏幕尺寸,我们需要使用媒体查询(media queries)或者百分比单位来定义元素大小,确保在各种设备上都能正常显示。 3. 性能优化:为了避免一次性加载大量图片导致的性能问题,...

    屏幕适配_宽高限定符适配.zip

    5. **使用Android Studio工具**:Android Studio提供了屏幕预览功能,可以在同一界面预览多个屏幕尺寸的效果,方便快速调整布局。此外,`Design Surface`的`Device Metrics`选项也可以帮助查看当前布局的尺寸和位置...

    html5手机上传图片尺寸裁剪代码.zip

    Cropper.js提供了一套完整的API,可以实现图片的自由裁剪、旋转、缩放等功能,并且支持响应式布局,适应各种屏幕尺寸。 在实现过程中,我们需要注意几个关键点: 1. 图片加载:确保图片完全加载后再进行处理,防止...

    android多分辨率适配 ,判断平板还是手机,等比例缩小图片.zip

    这个项目源码主要涉及到如何进行多分辨率适配,以及如何判断设备是平板还是手机,以及如何实现图片的等比例缩小。下面我们将详细探讨这些知识点。 1. **多分辨率适配**: - Android系统提供了多种资源目录(如`res...

    安卓开发全面屏手机的方法图片用于参考和实验

    3. **百分比布局(PercentLayout)**:谷歌推出的百分比布局库可以帮助开发者根据屏幕尺寸按比例设置控件大小。这对于全面屏尤其有用,因为它允许元素的大小随屏幕尺寸变化而自动调整。 4. **可伸缩图层(Vector ...

    jquery AutoImge 图片自适应屏幕

    在网页设计中,图片的展示效果常常受到屏幕尺寸和设备分辨率的影响,导致图片无法自适应地填充或适应页面布局。"jQuery AutoImage"是一个解决此类问题的插件,旨在帮助开发者实现图片在不同屏幕环境下的自动调整,...

    手机网站设计尺寸及界面布局实用.pdf

    2) 标题和底部栏应全宽适应;3) 文本内容应自动折行以适应宽度;4) 图片能够自适应缩放,但不超过原始尺寸;5) 界面元素的宽高应符合用户视觉舒适度;6) 避免仅依赖分辨率比例缩放界面布局。 对于Java客户端,由于...

    basic4android适应各种屏幕大小的例子

    这样可以为不同屏幕尺寸提供可变的大小,而不是硬编码值。 3. 图像资源(Drawables):使用不同的密度目录(hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi)存放适配不同设备的图像资源。每个目录下的图像大小根据设备的像素...

    android多分辨率适配 ,判断平板还是手机,等比例缩小图片.rar

    同时,使用百分比布局(PercentRelativeLayout或PercentFrameLayout)或者ConstraintLayout,可以使布局更适应不同屏幕尺寸。 通过这些技术,开发者可以有效地解决Android多分辨率适配问题,为用户提供一致且优质的...

    蓝色宽屏手机APP官网模板

    5. **响应式布局**:作为手机APP的官网模板,它应具备响应式设计,能够自动适应不同设备的屏幕尺寸,包括桌面、平板和各种智能手机。这样,无论用户使用何种设备访问,都能保证网站的良好显示效果。 6. **SEO优化**...

    安卓Android源码——android多分辨率适配 ,判断平板还是手机,等比例缩小图片.zip

    Android提供了资源目录结构(如`res/layout`, `res/layout-sw600dp`, `res/drawable-mdpi`等)来存放针对不同屏幕尺寸和密度的布局文件和图片。通过这种方式,系统会自动选择最适合当前设备的资源。适配策略包括使用...

    Android屏幕大小和精度

    Android将屏幕尺寸分为小型、正常、大型和超大型四种类型,如小型屏幕通常对应手机,大型和超大型可能对应平板电脑。 2. 屏幕密度:屏幕密度是指屏幕像素点在物理尺寸上的分布,通常以每英寸像素(ppi)为单位。...

Global site tag (gtag.js) - Google Analytics