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">
Related
I have a single page phonegap app which makes use of CSS3 styles. Its performance is acceptable on all other devices except Nexus 10. I suspect that it might be related to the higher resolution that Nexus 10 uses.(2560 x 1600 pixels).
As per the benchmark tests (http://www.gsmarena.com/google_nexus_10-review-861p5.php), Nexus 10 falls behind other tablets. So to prove my theory I wanted to see if I can run my application on lower resolution mode on Nexus 10. Is it possible & how to do it? Can I use meta tag viewport with scaling 0.5? will that work?
Assuming the Nexus 10 identifies itself uniquely you should be able to check for it with the Device object in the PhoneGap API.
update
To get the performance change on the Nexus device scaling is not going to do it for you since the same number of pixels are still needing to be calculated - however the target-densityDpi viewport option will hopefully achieve what you require - see this SO Q/A target-densityDpi
On the Nexus 10 the normal resolution is 300 dpi so you would want something like <meta name="viewport" content="width=device-width, target-densityDpi=150">
Try providing android:anyDensity="false" in the supports-screens section of the manifest file, if that helps..
Specifically, when testing my site on a Samsung Galaxy SIII I'm seeing the styles defined for the desktop.
How do you get the phone to use the mobile styles (with a 320px width in mind) or to utilize 'hide-for-small' class etc?
Currently, on that phone (and I figure retina display devices too) you'll not see .hide-for-small or global css being applied, only media queries for larger (768px and above) viewports.
Does anyone have experience making high DPI devices, i.e: (-webkit-min-device-pixel-ratio: 2) work with Foundation4?
Have you remembered to include the Viewport meta tag? The S3's viewport is 360x604, so if you're seeing styles for media queries greater than 360 on your portrait view, chances are you have your viewport misconfigured. I'd encourage the following viewport tag and #viewport directive (in your CSS):
<meta name="viewport" content="initial-scale=1.0">
#viewport {
zoom: 1;
}
Also take a look at this related question on the viewport meta tag on the S3.
I am having problem creating css media queries for smartphones, especially for Android devices such as Samsung Galaxy S3.
It seems like <meta name="viewport" content="width=device-width, initial-scale=1.0" /> and CSS media query gets different data on device-width.
If I hold my Galaxy S3 in portrait mode its screen is 720 x 1280, and it seems like content="width=device-width from meta viewport is giving me the same width.
But if I look at same page in landscape mode it seems like content="width=device-width from meta viewport is still giving me 720 width while listening to a bigger sized media query, so to speak 1280.
This results in web pages loading with a somewhat zoomed view, probably since it thinks that 720 is max width.
Check screens:
Galaxy S3 Portrait (Chrome)
Galaxy S3 Landscape (Chrome)
Above was tested on Samsung Galaxy S3 with Chrome browser.
I have a similar problem, actually worse with the default Android browser called "Internet". There it seems to ignore all CSS media queries while still listening to viewport.
Check screen:
Galaxy S3 Portrait (Default)
Try using a inspector in the phone to play around with values and tags or post us a demo. It's hard to point out the exact problem without any code attached to your question.
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 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