PDA

View Full Version : Targeting different screen dimensions



KJedi
13 Jan 2012, 7:14 AM
Hi,

I need to develop an app that should look well in iphone 3, 4, galaxy S and galaxy S II. They all have different dimensions and sometimes they are drastically different. What is the general approach to this? In the introduction or presentation video I saw sencha claims to solve this problem somehow.
I need to scale buttons, logos, images, toolbars height etc.

What resources should I check to solve my problem?

mitchellsimoens
13 Jan 2012, 7:33 AM
Have you looked into using the src service from sencha.io?

http://www.sencha.com/learn/how-to-use-src-sencha-io/

KJedi
13 Jan 2012, 11:46 AM
While this is interesting, resizing images on the fly is not the main problem. The issue is to resize buttons to fit the screen's width, make the text smaller etc.
Actually I just need to scale the application (as if it was an image) to different screen size.

DJFliX
18 Jan 2012, 8:35 AM
Hi! I have recently had some time to research this issue. Scaling is actually fine on iPhone 3GS/4/4S because of the retina display. All iDevices in the phone form factor report a viewport width of 320 pixels. I suggest you use the iOS rendering as a reference. Non-retina displays use a device pixel ratio of 1, Retina displays use a pixel ratio of 2. (This roughly means that 1 pixel in the viewport is actually 2 pixels on the screen).

Android devices on the other hand have a very strange way of reporting their viewport width. 480x320 (mdpi) devices report 320px width. They use the pixel ratio 1. 800x480 displays report 320px width and have a device pixel ratio of 1,5. This checks out because 320x1,5 = 480. The page is a little longer, but that shouldn't be a problem, sencha will make sure everything is okay and the most stretchable object will stretch. The big issue is qHD. qHD was a total nightmare because it reported a viewport width of 360! This is unlike ANY other device and I really hate the Android devs for doing such a stupid thing. This type of screen will make the browser report a device-pixel ratio of 1.5. 1.5 * 360 = 540 which DOES check out, but the UI elements are too small. All the buttons are unusable and the text is too small. I know that this is not sencha's fault, but it is sooooo annoying. I now change the font size in the css to something bigger than 116% (.x-phone .x-android) just to make the app usable, but it looks like crap.

Devices I have confirmed to report 320 pixels and 1,5 device-pixel-ratio:
Google Nexus One
Google Nexus S
Motorola Milestone
LG Optimus 2X
Samsung Galaxy S II
HTC Desire

Devices that report strange values:
HTC Desire HD (369 pixels? )

Devices with qHD/720p display that report 360 pixels:
Motorola Atrix 4G
HTC Sensation
HTC Sensation XE
Samsung Galaxy Nexus

TL;DR: You only need to scale on qHD/720p displays on Android, and it's hell. All other displays are fine.