I have a Samsung Galaxy S3 Android Version 2.3 and am trying to change some media queries for it. I am using this:
#media only screen and (-webkit-device-pixel-ratio: 2) {}
Which seems to be working for Chrome on Android, but not the native Android Browser. I've looked at what would target this browser and it says 360px W, 567px H, -webkit-pixel-ratio:2, but it is not working. Does anyone know how to get this browser to behave?
Try setting the pixel ratio to 1.5. I haven't actually tested this, however, it looks like the density may actually be 1.5 for hdpi devices (hdpi is 240dpi so it has a 1.5 pixel density over mdli, the baseline, which is 160dpi).
#media only screen and (-webkit-device-pixel-ratio: 1.5) {}
If this turns out to be correct, perhaps the core browser is just being stricter than Chrome and requiring you to enter the exact value.
The following article has a bit more detail: http://developer.android.com/guide/webapps/targeting.html
I'm assuming the S3 uses hdpi graphics but if this is incorrect, the following Stack Overflow has a more complete list of pixel densities (Google's article is a little old so only goes up to hdpi): Android screen sizes in Pixels for ldpi, mdpi, hpdi?
Related
How can you determine the effective browser resolution (for CSS) of Samsung Galaxy Tab A 10.1 (or any other tablets)?
The specifications say that the resolution is 1920 x 1200. So I designed an application that will run on 800+ Samsung Galaxy tablets. Now I see that the resolution is wrong and I can't get the right resolution from the internet. Of course the app is responsive but I would like to make use of a testing tool in the browser.
My goal is to add this correctly to my Chrome developer console.
Specs: http://www.samsung.com/uk/tablets/galaxy-tab-a-10-1-2016-t580/SM-T580NZKABTU/
A very cheap means of finding your device's web browser resolution could be to simply determine it's viewport dimension.
While there are a ton of apps out there to get the information for you, a basic website such as http://www.mydevice.io/ can help out with this.
This website should also help give comparisons of other devices if you don't have the device yourself.
I would presume the Samsung Galaxy Tab A 10.1 should be 800 x 1280 for CSS media queries.
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.
What simulator resolution i should keep when developing application for Samsung galaxy s2 and galaxy s3 ?
What i found that samsung galaxy s2 has 480x800 resolution and s3 has 1280x720 resolution so what i have understood up till now that I should ask my graphics designer to provide me hdpi graphics that contain 480x800 background images and to implement same background image in galaxy s3 mobile, I will use image of size 1280x720 and put in xhdpi folder so that it can work on s3.
The background image is something which covers whole available area for mobile app. so am i right ??
You will need to create several emulators or get various devices.
There are some pretty important ones, so generally you need to make sure you have:
ldpi, mdpi, hdpi, xhdpi
and
small, medium, large, xlarge
Some people choose to exclude certain sizes (like small and ldpi) but htat's up to you,
if you go with some or all of the following, it should be a good start:
480x320 (SE Mini 10), 480x800 (GS2, Desire, etc), 1280x720 (GS3, Galaxy Nexus etc), 1280x800 (Note, Xoom, various other tablets)
HTC ChaCha (because it's landscape default)
You need to make sure you create resources in the relevant folders for each density, usually, I tend to ignore ldpi and just put resources in:
mdpi,hdpi and xhdpi (mdpi will be scaled down for ldpi devices,
automatically)
You may also need to create various portrait and landscape layouts in different sizes.
Reading this page provides most of the necessary information:
http://developer.android.com/guide/practices/screens_support.html
This page also contains important information regarding size distribution and popularity that is constantly up to date:
Android Stats
One thing that Android does for you is that it manages resolution. If you use the proper size formats (dp, sp, etc), your layout will scale to almost all resolutions. If you place images in the proper drawable folders (hdpi, ldpi, mdpi, etc), the OS will also swap those out as necessary.
Also, the emulator should handle resolutions for specific devices, if I recall correctly.
Desing lazout in smart way! Usualy it means don't put to mutch content in one layout.
Make sure that evrything looks good on smallest size and bigest size. It is better to treat tablets separetly. Read how providing alternative resources works, you can build sepereate layouts for each screen size.
Check if the hardware is available on that device before using it. hasSystemFeature() can be used for checking.
Ideally I'd have a heap of physical devices to test on, but in reality I don't have access to devices with all the different characteristics.
I'm targeting Android 1.6-current (4.0.3 at the moment), primarily phones, but also want the app to be at least somewhat usable on tablets.
The configurations I've been usually testing with until now:
Android 1.6, 320x480 MDPI
Android 2.2, 480x800 HDPI
Android 4.0, 480x800 HDPI
(landscape and portrait, with and without network connection)
I'm thinking of a set of configurations that wouldn't be excessively large but still would give good coverage of various devices "out there". What Android emulator configurations would you suggest?
Update:
Based on the answers I added this configuration to the list:
240x320 LDPI (QVGA skin)
Important to note is that it has 3:4 aspect ratio, different from 3:5 that WVGA has. If layout is tuned to just barely fit in WVGA, scaling down to QVGA can reveal problems. Good idea to check!
Also, added simulated Galaxy Nexus. Just to realize from now on I'll need xhdpi graphics (blurry icons: not acceptable!):
720x1280, no hardware buttons (WXGA720 skin), no SD card
What about 240*320 ldpi ? like xperia mini, motorola, cliq
Well, I'd suggest you add LDPI configuration (which is QVGA - 320x240 and has 0.75 density) as far as there are a lot of devices with such screen resolution.
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.