I developed an app using Adobe's Phone Gap, mostly checking it on mobile Safari, Desktop Firefox and Desktop Chrome, but when I checked it on Android High Resolution Devices (HRDs) all of my fonts and measurements (calculated in REMs) were half as large.
I tried fixing this with:
#media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
html{
/*font-size:125%;*/
}
}
...but while it made Android HRDs look normal, now iOS HRDs devices look overly large. What is the best way to correct this discrepancy? I looked into Android-specific media queries, but that would mean adding like 20 of them and there is no guarantee that they would be affecting Android devices specifically.
Add this meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
According to a talk by Mike Stamm at CSSConf the problem was actually in the target-densitydpi attribute in the meta viewport tag, which Android uses, but Apple ignores. It should be:
<meta name="viewport" content="target-densitydpi=160">
Apparently that solves the problem with most Android devices, (although some Android devices require target-densitydpi=140).
Related: that video linked above has some interesting historical reasons behind the differences in iOS and Android displays.
Related
I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
I created a webpage, that works well with all major browsers. I tested and adopted the website also to mobile browsers. Unfortunately, I didn't test the page when developing on Android browser and didn't know about the problems (Android 4.2).
the following viewport works well with iPhone 5 and mobile browsers like mobile chrome.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimal-ui">
..and I would rather not change that.
I also did some media queries which work well on mobile devices.
#media only screen and (min-width : 150px) and (max-width : 420px)
#media only screen and (min-width : 150px) and (max-width : 980px)
The webpage is wrapped in a container of 977px and I use fonts of 24px and 16px, which both show up much bigger on Android browser (Android 4.2).
Anybody with suggestions how to solve that font problem?
I tried CSS font-size-adjust and text-size-adjust but I am not able to solve hat problem, in contrary I get different output in various browsers.
It sounds like a density issue. Add the target-densitydpi to the viewport tag. Remember this will be used on GB but not greater devices. Check this out http://www.petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/ for more detail.
After a sleepless night I found myself a solution that works.
I put Javascript/JQuery script before the end of the "body" section to reduce the font-size in the android browser to fit in the main navigation bar.
With the first if statement I avoid that the pixel-changes also appear in chrome android browser, the nested if statement targets the android browser.
<script>
if(!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
if (navigator.userAgent.toLowerCase().indexOf('android') > -1) {
$('#mainnav nav ul li a').css('font-size','18px');
}
}
</script>
This script could probably be optimized also for other android browser, since I did not test all.
I am trying to set up MQ's to make a site responsive. I have it linked and everything it working fine, with one caveat the max-width: 480px doesn't work for droid. It does recognize my mobile stylesheet when I up the max-width to around 900px.
I haven't been able to find an answer to this yet, I have played around with some viewport tags:
<meta name="viewport" content="width=device-width" />
and
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
What is the best way to target Android phones using media queries?
One problem you might be running into is the fact that Android phones, even more so then Apple phones, have varying pixel widths.
For example, if you were testing on a Samsung Galaxy S3 or S4, the pixel width of those phones is well beyond 480px in landscape mode, even accounting for pixel density, so the media query would never fire. When it comes to some of the newer devices, you are better off to target user agent and then serve mobile queries based on that header response.
Also, see this answer for more details on testing for mobile devices.
You want to start by changing your meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
I'm working on porting an iOS app built with PhoneGap 2.2.0 to Android. My main issue is having the app scale appropriately depending on the device's screen size. Using getResources().getDisplayMetrics(), I get this info about my Android device:
DisplayMetrics{
density=1.5,
width=540,
height=960,
scaledDensity=1.2750001,
xdpi=368.06036,
ydpi=365.22525
}
This is my viewport:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, target-densitydpi=143" />
As you can see I am hardcoding the target-densitydpi to get the app to reasonably scale to fit the screen of my Android device. Since I want my app to support multiple screens, is there a way to use the information given by DisplayMetrics to adjust the viewport appropriately.
I have looked up different solutions online but none seems to work as expected to.
Thanks in Advance.
I would suggest looking at the problem from a different angle: how can I make my application scale to the screen size of any device? At this point you are trying to support Android and iOS, but later on you might also want to support tablets, Windows Phone 8, BB devices, etc. As such, I would go with a web application design that is responsive to the screen dimensions: that is the application dynamically allocates space according to available dimensions. Check out the below links/frameworks for responsive design:
Twitter Bootstrap: Responsive Scaffolding
WebBlocks: Responsive Mobile Designs
You can also read more about the reasons behind the technology at: Why 2013 is the Year of Responsive Web Design?
I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.
Now I tried this with my android phone. I didn't work correctly for portrait mode...
I tracked the problem down to wrong handling of the #media-selectors at the phone:
This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
I got the following results:
portrait, 800x1200
landscape, 800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations.
But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
Additional Information:
Browser-Version: WebKit/533.1
Android 2.3.3 / Sense 2.1
HTC Desire Z (T-Mobile firmware)
JavaScript reports identical screen resolution
Questions:
Is this only my phone model or a general behavior of the android browser?
How to fix this?
After some more investigation on that topic I found the following solution.
You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS #media selectors are working as expected.
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
See: How can I "disable" zoom on a mobile web page?
And: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function
Regards,
Stefan
-- edit --
When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">
However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.
-- edit --
Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'
http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/