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.
Related
What would cause a 2560px wide device to claim to be 1138 pixels wide? It it because it's Android? I'm getting very different font size compared to dev tools on a desktop and a div sized to 2560px wide is 2.5X the width of my page on the tablet. I'm super confused. Tried every meta tag and forcing it to be 0.45 device with seems very wrong and hacky.
document.body.clientWidth
My iPhone 6 says 667px which is correct. Desktop browsers return correct width too. It's just this Samsung s4 tab that seems to return ting dimensions and create gargantuan text sizes.
I'm running android 4.4.4 on a 52" touchscreen mounted in portrait orientation. Even when requesting the desktop site to the browser, because of the portrait orientation, I get the responsively scaled version of many sites. I believe that this is related to the system reporting it's orientation as portrait. I have adjusted the resolution in various configurations but still get the scaled display. The zoom and scale settings have been disabled in the browser too.
I can fix this on the sites that I manage programmatically, but I would rather solve the problem on the device since I don't manage all the sites. Is there a way I can forge reported resolution or reported orientation to prevent this behavior? Any other ideas as to how to resolve this? The OS is rooted, so anything goes.
There is an experimental API for device orientation, but most developers calculate it from the provided browser properties, so you can't really fake that from your side.
But, I'm not sure if the problem you're running in to is not one of orientation or of the pixel ratio. On most devices the resolution is halved to provide double density displays. This means that even though you might request the full site and be on a screen that could reasonably render 1080 x 1920, because the browser expects to employ pixel doubling, it might only render it as if it were 540 x 960 and the over-sized elements are your screen being, essentially, waaaaaay too big, but proportionally correct.
If you're tethering to a phone you might see if there is a device specific method or app that overcomes this limitation. If you have installed directly on the firmware of a display, I would contact the manufacturer if it is supported.
Best of luck!
As far as I know, the 'orientation' is not reported. Just the window size is reported. You may be experiencing that some browsers will get the desktop layout but then scale up the font size to try to make it more mobile friendly.
I'm just starting to learn to develop on Phonegap and I came accross this issue in my first tests.
I made a long list-view with title and description with 100% width and px defined values (for fonts and paddings) on my css.
First, I tested the app on a Motorola Defy+ (mdpi device) and it looked good. After that, I tested the same app on a Samsung Galaxy S4 (xhdpi device) and, obviously, the list-view items got VERY small on the screen:
This surely is expected, since the interface should fill that many pixels on both devices. But since they have almost the same physical screen size, it would make sense for the interface to have the same size on both. And that's what I want.
I found a lot of people around talking about the "viewport" meta-tag and I decided to give it a go, but no success (tested "width", "initial-scale" and "target-densitydpi").
My question is: is there a way to make the interface behave according to the physical size/screen density (such as dp and sp parameters on Android's native) so those elements have similar real sizes accross all kinds of screen sizes and densities?
What about this meta: <meta name="viewport" content="width=device-width, initial-scale=1">
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 working on a web application which is run on iPhone and various Android phones. I have used iUI framework so far. iUI was designed for iPhone 3 and uses pixels in CSS for font-size, line-height etc. But the result is unusable on a newer Samsung I5500 with high pixel density (240 x 320 pixels, 2.8 inches = 143dpi). All the elements are too small. This can be partly compensated in browser settings > zoom > close, but I do not like making users change their browser settings.
My goal is, that every link and every button can be used comfortably by touching it. For that I would like to ensure a minimal physical size of the element. Luckily the CSS 2.1 specification provides a way for that: min-height: 20mm or min-height: 0.8in. Unluckily every phone I have ignores that declaration. On iPhone 3GS the element is 11mm in size, on Samsung I5500 (Andorid 2.1) is 10mm, on HTC Wildfire with low res display (Android 2.2) it is 14mm in size. Looks like WebKit browser assumes some low resolution like 96dpi rendering the elements hardly readable and barely clickable on high resolution mobile phone displays.
This blog post at sencha provides some solution approaches an recommends setting all the sizes for buttons, links, list items in em and shifting the size for body once by some sort of browser sniffing.
They also mention CSS3 media queries but tell, that it does not currently work:
#media screen and (min-resolution: 160dpi) {
body {
font-size: 114%;
}
}
For Android
<meta name="viewport" content="target-densitydpi=low-dpi" />
seems to help. It enlarges the page on devices with high-dpi more than on devices
with low dpi. But the physical size of elements is still different. See also Android WebView.
The Android DisplayMetrics documentation with its density vs. scaledDensity brings more fuzziness than clarification.
So the best combination I found so far for iPhone and Android is iUI plus following declaration in HTML head:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;target-densitydpi=low-dpi;"/>
Is there a modern, elegant way to set the font-size and button width and height for a wide range of mobile devices?
Or which workaround do you use?
I think the answer for you is the use of the EM unit instead of the pixel unit.
http://www.w3.org/WAI/GL/css2em.htm
It is a proportionnal type of unit. So that you are not specifying the size of your font and buttons as a fix number but as a multiplicator to the default font for that device.
It's webmaster's best practice for accessibility anyway and why most framework are evil !! :D