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?
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 this in my index.html file :
<!-- WEB SEARCH META TAGS -->
<meta charset="utf-8">
<meta name="robots" content="index,follow" />
<meta name="keywords" content="surfboards,surfboard,shaper,surfing,app,boards,board" />
<meta name="description" content="" />
<meta name="author" content="BoardLine Cie">
<link rel="shortcut icon" href="images/apple-touch-icon-57x57-precomposed.png" />
<!-- SAFARI WEB APP META TAGS -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="apple-mobile-web-app-title" content="BoardLine">
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- CSS-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- iPhone + Android -->
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image320x460.png">
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57x57-precomposed.png" />
<!-- iPhone (Retina) -->
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x920.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/apple-touch-startup-image640x1096.png">
<!-- iPad -->
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="images/apple-touch-startup-image748x1024.png">
<!-- iPad (Retina) -->
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
<link href="img/splash/ios/splash1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="img/splash/ios/splash1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
The files are in the root folder, whose access is restricted by a .htaccess (for testing purposes).
All png fils have the pixel dimensions indicated in the file name.
But android (4.1.2 in my case) keeps using a standard icon for the home-screen shortcut (an orange picture)...
Doesn't work on iphone4 neither.
Can you help me figure out what is wrong ?
thanks
Google seems to no longer support the apple-touch-icon syntax.
rel="apple-touch-icon" is deprecated in favor of rel="shortcut icon" but still supported as of Chrome 33.
In your example you have both, so it should work. However, it looks like the stock browser on some Android devices is not capable of using custom icon on home screen.
I experience the same on a Samsung Galaxy Note 3 with Android 4.3.
Chrome will use the custom icon, but the stock browser will only use that orange generic icon.
User Agent for Chrome on my Samsung Galaxy Note 3 is:
"Mozilla/5.0 (Linux; Android 4.3; SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.136 Mobile Safari/537.36"
User Agent for the stock browser is:
"Mozilla/5.0 (Linux; Android 4.3; nb-no; SAMSUNG SM-N9005 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36"
which looks to be a Samsung packaged older version of Chrome (v28)? If Chrome didn't support custom home screen icon before v31 that could probably explain why it doesn't work.
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..
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" />