In iphone 4 the virtual CSS resolution is 1/4 of it's physical: 480-320.
Does android browser (the one that comes with the OS and called "browser"), say in the most common devices that have 800-480 or 854-480 resolution, has a virtual resolution the CSS is scaled to?
There are MANY android browsers. More than 10. They are extremely different. I don't think they have anything in common except standard technologies as HTML, javascript, css, active components and so on.
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 am struggling with the selection of font sizes in my Android app. I have a number of real devices, different sizes, different OS versions, different manufacturers, phones and tablets.
The text looks good on all of those devices.
However, when I run the app in the emulator, the fonts are often too large. Obviously, this has to do with the display size and resolution settings for my virtual devices. So I have been toying around a bit with different instructions I could find on the web including a virtual device repository and the Samsung skins. Still, I don't seem to get a good match between real and virtual devices. As an example, the Nexus 5 virtual device preconfigured shows the fonts are monstrous. Font sizes I use are between 10sp for small text and 26sp for very large headers.
I could now configure the emulator such that my app looks great but then I really can't be sure what users will see on their real hardware. What is the right approach for gaining enough confidence that my app looks good in the real world?
Since you are using sp as unit for font sizes, the fonts are scaled according to your user's preferences. If you don't want to allow your fonts to be scaled you should use dp as unit for font sizes.
But I wouldn't recommend doing this because this limits accessibility for users with impaired eyesight.
I have converted my website to android compatibility with using of CSS3 Media Queries(I just changed CSS only). My android device dimensions are 1280x 600. Its working fine in android devices.
But when I turned my desktop to 1280 resolution the design is changed (like how i wrote for android device). But it shouldn't come like that.
Only for devices i have used the css below
#media only screen and (max-device-width:1280px){
}
What is the mistake i have done?
That query affects every device with a max with of 1280px, not only mobile.
I wonder how other people handle this issue, and can't seem to find a definitive answer.
I am doing a JSP redirect for a mobile version of a website, and things are working fine for other platforms, but Android presents an issue. According to the comments in the answer of this post, can one really infer that simply targeting mobile in the User Agent string will target Android devices and exclude all Android tablets? I would love to hear a resounding "YES!", but would also like to hear different angles on this.
I was considering using screen resolution if the User Agent string contains android, but am wondering how much longer that will continue to be a good gauge. We are seeing a variety of tablets that don't have the real estate of an iPad, but are definitely bigger than a Smartphone size. I also think it won't be long before we see phones with resolutions of 1280x800, considering some of the in-between devices we are starting to see.
According to the comments in the answer of this post, can one really infer that simply targeting mobile in the User Agent string will target Android devices and exclude all Android tablets?
Well, it's what Google tells you to do.
I would love to hear a resounding "YES!"
<resounding>YES!</resounding>
(moving this into a <span> with resounding CSS is left as an exercise for the reader)
We are seeing a variety of tablets that don't have the real estate of an iPad, but are definitely bigger than a Smartphone size.
That's probably difficult to address via a pure server-side redirect. There are instructions for targeting different screen sizes for Web apps, but they assume you're doing the work on the client. The mobile or not is a very coarse-grained solution. I'm not aware of a reliable user-agent way to determine screen sizes or densities.
I also think it won't be long before we see phones with resolutions of 1280x800
The HTC Rezound is 1280x720 (i.e., 720p), as is the Galaxy Nexus, AFAIK.
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