android和ios移动设备需要什么屏幕尺寸？

Question

So i have a mobile app, and i have a graphic designer.

Now i want to get the graphic designer to give me the images necessary for the full-screen background.

The device is for android and ios - and will be runnable on the various mobile/tables types for android and ios.

What are the sizes I am meant to get the graphic designer to give me for the image? I had a read of the android size-guide , and came away unconvinced that the android team themselves know what sizes of image are required.

(I mean, there are tables everywhere, and sometimes they say to multiply the base by two, but then for example 470dp x 320dp *2 != 960dp x 720dp)

The ios screen size chart i am using is this one , and unless someone says otherwise i will keep to using that.

I am assuming all images will be 72 ppi, if only because that seems to be the suggestion from this question

Answer 1

I've searched and searched for one for android, and I've come up with nothing. You will have to hard code in the dark a UI for android that can resize objects based upon the size of the device. Although this sounds hard, it will just take some time and practice (As I'm in the same boat with you taking my iOS apps to android having never programmed for android myself). Best guess is http://i1.wp.com/thedigitaldisciple.net/wp-content/uploads/Screen-Master-3-2014.jpg

For iOS, it is way easier. http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ This is the guide I personally like to use as it is up to date for iOS 7 and iPhone 5s. For details with iOS 8, just see developer.apple.com and the vast libraries there (you will be required to pay the $99 fee to access the libraries, download the software, and host your apps on there networks).

Hope this answered ya question :)

Update: Here is a good link about testing for multiple screen sizes on Android because there is no set sizes. http://developer.android.com/guide/practices/screens_support.html#testing

Answer 2

Does anyone have a list for the android os size requirements (tablet/phone)

It can be anything.

This is no different than desktop windows in a windowed OS (eg, Windows, OS X, Linux) or browser windows, which can be of any width and height. Either do not use a full-screen background, or use the same techniques that desktop and Web developers use (eg, a full-screen background that fades to some basic color that can be used to fill in where the aspect ratio of your background differs from the aspect ratio of the screen/window/browser).

Can this be confirmed at 72ppi for the image?

Android screen densities fall into several buckets, as is outlined in the documentation . None are 72dpi.

Answer 3

I can only answer for Android. I guess that you just have to follow the information from this link: http://developer.android.com/design/style/iconography.html .

The medium quality asset has te be 48dp x 48dp. It means that it will be 48px x 48px on a 160 ppi screen. On a 72 ppi screen, the image will appear 107px x 107px.

I guess that you can define the dimensions of the other qualities of your picture the same way you would define the HDPI, XHDPI,... icons.

The HDPI icon has to be 1.5 times bigger that the MDPI so it will be:
72px*72px at 160 dp
or 48px*48px at 240 dp

The XHDPI icon has to be 2 times bigger that the MDPI so it will be:
96px*96px at 160 dp
or 48px*48px at 320 dp

As a result, I think that you need to save the same file with different ppi parameters to get your different qualities. I can provide you a script to do it automatically from Illustrator if needed

Answer 4

The Problem about Android is that there are all kinds of screens, from SD to 4K. Most of them have an aspect ratio of about 16:9 but there are quadratic screens as well (and soon the Moto 360 with a round screen) so the best you can do is get an image in 4K and scale it down in the application to fit the screen.

Answer 5

You must pay attention to the different aspects that are explained in the official guide .

For image resources you must pay attention to different screen densities. As you said you want images for full-screen background, apart from different densities, you must take into account the device orientation and maybe the aspect ratio too, but in most of devices some parts of the background image will be out of the screen.

Answer 6

For iPhone :

Here are two sizes available for screen size

                                iPhone 4S              iPhone 5

Window (including status bar)   320 x 480 pts          320 x 568 pts

View inside window
(visible status bar)           320 x 460 pts           320 x 548 pts

Launch Image                   640 x 960 pixels       640 x 1136 pixels
(Launch Image Sizes for 
 iPhone )   

You can it this link with iPhone size

For Android :

It's vary with the size

For larger screen phones   720*1280

For small screen phones    480*800

it depends on resolution of device. some larger screen size has low resolution so they use 480*800 and some small screen size devices but with high resolution uses 720*1280

You can it this link with android size

Answer 7

Just got to androidpixels.com and determine what you need. Also, you can ask your designer to include apps that give you text size in sp and margins ins do from psds.

Answer 8

you can set platform specific styles and attributes. so easily you can handle multi screen size by set style for each platform separately. for example: in style.css

 .android #theElement { ... }

 .ios #theElement { ... }

or even with more details:

 .ios.phone #theElement { ... }

 .android.tablet #theElement { ... }

also following link should help you:

https://blog.safaribooksonline.com/2012/07/13/phonegap-tip-changing-look-feel-based-on-the-platform/

supporting multiple resolution and density of images in phonegap