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;" />
Related
The media queries were working correctly. Had an issue with the linking of my stylesheet. Thanks a lot for your answers! Won't delete this questions to keep the knowledge to the community
I'm struggling with my media queries. If I resize my browser window they work properly, but when I emulate mobile devices (IOS and Android) with the Google Chrome device emulator, they won't work.
#media (max-width: 650px)
Adding only a screen or a min-width doesn't change anything. The viewport tag is set.
Is there anything I need to know? Thanks a lot!
You should set the meta viewport tag in the html header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And you could add !important to the media query rules to check if other rules are overriding them
You can try this code:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Also, set a meta viewport tag in your HTML head component
<meta name="viewport" content="width=device-width, initial-scale=1">
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 a simple html website I am trying to view as a local version on a tablet with ICS. The html works, but the css and js files do not seem to work. All I am seeing is the html. Is there something I need to do in order to view the website in its full form?
I am not using any special code specifically for mobile. There is only a folder, an index.html file, and folders for js and css.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kiosk Site</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
Some of your code would be appreciated.
I persume you're using a WebView:
Regarding the JS - you need to call setJavascriptEnabled().
Reagrding the CSS - it's hard to tell with none of your code. But I would suggest you look at this: Rendering HTML in a WebView with custom CSS.
I am facing a very strange issue with Nexus 7 regarding CSS media queries. The media query runs fine on orientation change, but if we keep the device in landscape mode and keep it idle for some time and then on orientation change the viewport takes the styling of the landscape mode other than the portrait mode styling.
Here is the code that I have written
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
And in the css file the styling is as below.
div {height: 500px; width: 500px;}
#media only screen and (min-width:480px) {
div {background: red;}
}
#media only screen and (min-width:768px) {
div {background: green;}
}
For other devices like Ipad, Iphone, S3 etc the media queries runs fine even if these devices are kept idle and then on orientation it takes the respective viewport styling, but on Nexus 7 the div colour remains green when the orientation changes from landscape to portrait view after the device is kept idle for some time.
Please help me out with this situation.
Try updating your viewport meta tag attributes <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I added the following lines to my header, but when I try to view my webpage on an android device I can't scroll down.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
Any ideas why I can't scroll down?
Maybe you have :
html, body {
height: 100%;
}
Some webkit's browsers doesn't like this ;)
You should try to remove this rule.
I have noticed that if a website contains elements with css position: fixed; the screen won't scroll in android devices. You should use position: absolute or relative instead.