I'm developing a small game for Android with Phonegap. I'm using media queries to support 3 different screen sizes (width from 480 to 1920 px).
For Android version lower than 4.4 all works fine. But when I test it on a full HD resolution, Android displays all scaled like on a 480px screen. All seems to be very big. So having a full HD resolution does no make any sense.
Well, setting the target SDK version to 18 fixes the problem, but I would like to known what is happening there.
The documentation says, Android is scaling all to fit on the page. But why does it scale so much? Why not for higher resolution? There is no code that could explain this. I made the media queries especially to handle different resolutions.
Related
I'm part of the Android development team at a small company in the city where I live.
We're working on building different apps and currently there's this app we have the design as a .sketch file but the layouts are only drawn for iOS devices and we need to adapt based on those guidelines. The thing is there are 2 different layouts for the iPhone SE and for the iPhone X. They are mainly the same but a few things differ like font sizes, margins, paddings, etc.
I want to implement the design on Android to also be dynamic depending on the user's resolution (or DPI, better said) so I'm trying to use the dimens-xyz.xml files to set my sizes in there and use those values as references in my layouts so I only write one layout xml for each screen, no matter the DPI.
So far, so good. My question is: What are the Android equivalent screen DPIs for the iPhone SE and iPhone X? What dimens-xyz files do I need to use in order to keep the UI consistent for smaller and larger screen devices and have the UI be "responsive".
It's hard to find a relevant answer on Google because it's kind of a technical question and when Google sees iphone and screen in the same search query it starts throwing results of comparing screens for iOS vs Android phones.
PS: I have 0 prior knowledge on iOS development and internals
For iPhone SE, having a 4.7 inch display and 1334 by 750 resolution, you can go with 4.7 WXGA which is a 720 by 1280 equivalent in Android (the closest i could find).
As for Iphone X it has a resolution of 2436×1125, with a 5.8 inch display giving a PPI of 462.63. Closest in Android would be Pixel 3A, with 2220x1080 and 440 dpi.
I'm using Titanium SDK 2.1.3 and I've come across this problem recently, since Android 4.0 and greater can be found in both smartphones and tablets, how can I differentiate between them? If I try to distinguish based on resolutions it wouldn't work right, since some high end smartphones have smaller screens but higher screen resolutions, while some tablets have bigger screens but smaller resolutions.
The app I'm working on work should be displayed in portrait on smartphones, in the case of tablets it should be shown in landscape.
What's the right approach to differentiate between a tablet and a smartphone?
Thanks for any help in advance.
I found a module that calculates the screen size of the device based on the number of pixels per inch, though not 100% accurate it works, this is the link
I am searching on different resolution support in IBM Worklight android . From this side i am reading tutorials IBM Worklight Tutorials In tutorial/module 09 they discuss about different resolutions.
In the document there is line which telling:
By default, Android application assumes that the application HTML
file was styled for a screen width of 320 pixels.
When displaying graphical elements on wider screens, Android
automatically scales images and fonts to the appropriate ratio.
For example, on a 480-pixel wide screen, a 100-pixel wide image will
be scaled by 480/320 (= 1.5) to 150 pixels in width
Now i make a Worklight Hybrid project and set a background image in it and two buttons on this image. Its a demo app in which i am testing different resolutions.
Now i deploy this app in android and run it on Tab 7 inch ,nexus 4 and tab 10.1 .Now my image size is 580x320 and bit depth is 24.
When i run this project on nexus 4 it gives the width of image correct but it do not scales the image height vise.
When i run this project on tab 7 2 , it shows the image having some extra white space on the left of image and extra white space on height of image means down the image.
When i run on tab 10.1 it shows the same behavior as the tab 7 2 did.
I am really confuse that which exact general size will be use so that all these scale on all screen sizes and not shows extra white space on width and on height
I would suggest using Worklight Skins in order to support multiple Android devices (with varying screen sizes) in your application.
Idan's answer works for me. I have a android tablet for some reason the app looks very blurry and huge buttons and fonts all the time. I have tried all the different target-densitydpi setting, the button might have change sizes. But everything is still very blurry.
Then I set this in the Android manifest as per Idan.
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="13"/>
Now everything is sharp and crisp on my low resolution tablet. It turns out that Android would automatically do some scaling "screen compatibility mode" even though my device can support better resolution. Android will still treat this as low resolution and scale things automatically. By providing the target, it will stop this behaviour when the device is higher than that Android version. Read more here.
http://developer.android.com/guide/topics/manifest/uses-sdk-element.html
I am developing a mobile website, and I've come across an interesting issue.
I'm testing on my desktop, as well as on my Motorola Droid (Android 2.2). I have media queries set up to load 3 different stylesheets (320px wide, 480px wide, and 640px wide). I noticed that my Droid is loading the 320px stylesheet despite having a 480x854px screen. I set up a little JS to find out what the screen width is, and it's reporting 320px.
Does the Android browser run in MDPI on HDPI screens? It's scaling the 320px properly to fill the screen, but I'm a little confused why this is happening.
Also, I do have <meta name="viewport" content="width=device-width"> on my page, so that is not the issue.
Many OEMs have chosen to set their default browser viewport dimensions based on those of the iPhone (or similar resolutions) despite having an altogether different resolution. Apple had a similar problem with the release of the 'retina display' on the iPhone 4 where the spec sheet states 640px across, but screen.width will return 320px when is set.
As #omermuhammed mentioned base your logic on screen.width, CSS #media queries AND/OR device detection using WURFL or DeviceAtlas.
The following article may also be of interest in helping to clarify the issue:
A pixel is not a pixel is not a pixel by #ppk
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
I don't know in context of Android Browser, but I have seen handsets where Android reported wrong screen size. I would recommend basing your logic on a combination of user agent string AND screen resolution. This way you can detect this handset and handle differently, and use normal mechanisms with others.
I have noticed a few issues with getting screen.width and screen.height on Android 4.2.
Dimensions are not updated to reflect the orientation of the device.
You can correct this if you wish to by first getting orientation, then switching the values accordingly.
http://menacingcloud.com/?c=orientationScreenWidth
http://davidwalsh.name/orientation-change (nice matchMedia usage)
OS user interface elements are subtracted from the actual device screen dimensions.
E.g. nexus 7 screen is 1280x800, 1205x800 is reported. 75px for the OS buttons.
Ideally (in my opinion), the values should be reported in CSS pixels, not device pixels.
E.g. nexus 7, CSS viewport is set to 600px in portrait, but screen.width reports 800px. So DPR is approx 1.33
Overall, screen.width and screen.height are not very reliable (iOS has orientation issues as well).
I'll hopefully re-edit this answer with more detail soon.
i developed one application that should run on all the android supported devices.can you please suggest me different screen resolution of android os devices
QVGA-L
QVGS-P
HVGA-P
HVGA-L
were the original standard resolutions.
WQVGA (DSTL1 etc)
WVGA (Droid Incredible)
1366 * 768 WXGA (ODROID T)
are all the ones since developed that I'm aware of at the moment. generally android applications should run in portraid & landscape (and sometimes square) orientations.
There doesn't seem to be a central place where all this information is posted, but if you use QVGA/HVGA and scalar settings for larger resolutions this may get help for future devices.