I am developing an app using phonegap.I had already made my app which is compatible with 320 x 480 resolution screen.Now I am using media queries to make it compatible with 480 x 800 screen as well as higher resolutions as follows
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style1 -->
<link rel="stylesheet" media="only screen and (min-width: 200px) and (max-width: 320px) and (orientation: portrait)" href="style.css">
<!-- style2 -->
<link rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait)" href="style2.css">
<!-- style3 -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)" href="medium-style.css">
Now the problem is that when I run the application in 480x 800 resolution screen then instead of using style2 it is using style1.I also tried using a single stylesheet and removing the viewport.I am also unable to find any phonegap documentation related to media queries.Please help
You could use
html
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
css
/*240 - 320*/
#media (min-width: 320px) {
/*320 - 480*/
#media (min-width : 480px) {
/*480 - ...*/
....
//retina devices
#media only screen and (-webkit-min-device-pixel-ratio: 2.0)
The min-width is to Mobile First media queries.
Instead of spending hours on media queries (there are conflicts due to different interpretation across Android versions, and many more other disappointments) you can try https://github.com/biodiv/cordova-screengod
which does the job of scaling for you. You develop for one device and let the software scale your css to match the current device. Implementation is only a one-liner
screengod(['path/to/my.css'],function(){
/* do your app stuff */
});
and it also fixes screen problems like getting 320x480 on high-dpi devices. Furthermore, your css (without media queries!) not only works across Android devices, but all iOS and windows devices aswell, enabling you to write once - deploy everywhere.
Related
I've got following Meta tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
and CSS rules
#media all and (max-device-width: 640px) { ... }
#media all and (max-device-width: 480px) { ... }
When I open site by Chrome on my phone everything works as expected - max-device-width: 480px rules are used. But when I open site by Android 4 default browser it uses max-device-width: 640px rules. Can you explain such behaviour?
try using this tag #media(max-width: 640px){...} and #media(max-width: 480px){...}..
I know how to make a media query to apply a specific stylesheet to the iPad.
<link media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" rel="stylesheet" href="/css/style-ipad.css"/>
However I don't want it to pull in the styling I have made for android tablets
<link media="screen and (max-width: 892px) and (min-width: 480px)" rel="stylesheet" href="/css/style-medium-tablet.css"/>
The only problem with this second query is it applies that to the iPad as well as other medium tablets.
So I am wondering if there is a way to apply css specifically to the iPad, and then use a negation of that query to keep the medium tablet css from being applied to the iPad?
Thanks in advance
I have the following in the header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
I've also tried using:
#media screen and (max-device-width: 320px) { .... #media screen and (min-width: 321px) {<-- works only on iphone.. android is not 320px.
but have had to modify it to..
#media screen and (max-device-width: 360px) { .... #media screen and (min-width: 361px) { <--- to support iphone & android
I've looked through android's docs, and tried setting viewport content to 320, but the content still shows up wrong for android devices.
Could someone please break this down to me?
How do I make media queries for the different mobile browsers (like Opera Mobile and Firefox) on the Android? The CSS really breaks when I use certain browsers.
You can't directly wit CSS, but you can use
// target mobile devices
#media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
}
// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
// CSS goes here
}
// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
#media only screen and (min-resolution: 300dpi) {
// CSS goes here
}
also you can define in HTML
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-resolution: 300dpi)" href="css/mobile.css" type="text/css" />
I'm trying to target Android devices with a CSS file, but I've been unsuccessful until now.
I'm using the following CSS code:
#media only screen and (max-device-width: 800px) {
body { max-width: 100%; background-color:#000; }
}
I'm also invoking the css code with the following line in the PHP file:
<link rel="stylesheet" type="text/css" href="small.css" />
Any thoughts on what I might be doing wrong?
Thanks
Within PHP, you can check user agent, and based on that apply an appropriate style sheet.
And don't forget the viewport setting within a meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />