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" />
Related
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.
I have 3 different stylesheets, one for pc screens, one for smartphones like iPhone5S, Samsung Galaxy S4...and another for smaller smartphones, such as my Samsung Galaxy mini.
This is how I wrote my links in my html file:
<link media="handheld, only screen and (max-width: 300px), only screen and (max-device-width: 300px)" href="StylesheeetSmallSphone.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (min-width:301px) and (max-width: 480px), only screen and (min-device-width:301px) and (max-device-width: 480px)" href="StylesheetLargeSPhone.css" type="text/css" rel="stylesheet" />
<link media="Screen" rel="stylesheet" type="text/css" href="StylesheetPC.css" />
On every device, the css applied is the last one. What do I have to change so that every device displays its own css?
Try it..
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Do you mean EXCLUSIVELY the last one or ALSO the last one?
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 css calls:
<link rel="stylesheet" href="htlibery/desk_coupon_style.css" type="text/css"/>
<link media="only screen and (max-device-width: 480px)" href="htlibery/mobile_coupon_style.css" type= "text/css" rel="stylesheet">
When viewing on iphone this serves the correct style sheet.
When on my samsung android (captivate) it serves the desktop version)
If i hit refresh the correct style sheet is then served.
any ideas...
If no ideas, what is the best method to auto refresh on page load?
Thanks
So Far I have found this (From paste bin) to work best..
<!-- Mobile device detection by Bushido Designs: BushidoDesigns.net -->
<link rel="stylesheet" type="text/css" href="mobile.css" />
see note: <style type="text/css" media="screen and (min-width: 481px)"
<!--
#import url("screen.css");
-->
</style>
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
I will update after further testing..
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;" />