Jump to content

Media Queries


Spunky
 Share

Recommended Posts

Hey guys, I am trying to style my website for mobile devices and am having a very difficult time understanding media queries. I understand perfectly how to implement them but don't understand why the correct query doesn't seem to be used based on the size device I am testing.

 

I can get the right styles to display on my Chrome browser on my Galaxy S3 with the following query:

<link href="style.css" media="screen and (min-device-width:480px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>

However it doesn't work in the default Browser app that comes on the phone. According to mydevice.io as well as other such sites I have seen, the size of my device is 360px.

 

Thinking the problem was that this other browser (and I read IE and of course other browsers) don't support media queries I did some research and found something called Respond.js. The .zip came with a test.html which I removed where it called the .js and the queries work just fine without it on the queries do work fine in every browser I try.

 

They use:

<link href="test.css" rel="stylesheet"/><link href="test2.css" media="screen and (min-width: 37.5em;)" rel="stylesheet"/> <!-- 37.5em = 600px @ 16px -->

Which I changed to:

<link href="test2.css" media="screen and (min-width: 480px;)" rel="stylesheet"/>

Still works. But when I change it to max-width, that stylesheet doesn't render.

 

Beyond that, this is how the style.css looks (connected to the test.html)

/*This is just a test file for making sure the script is working properly.If it is, the media queries below will change the body's background color depending on the browser width.For a realistic use case for media queries: read up on Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/*/body {	background: black;	color: #333;	font-family: Helvetica, sans-serif;}p {	width: 60%;	min-width: 18.75em; /* 300px @ 16px */	max-width: 43.75em; /* 700px @ 16px */	margin: 2em auto;	background: #fff;	padding: 20px;}a {	color: #333;}/* hide the attribute-test element. test2.css will show it */#attribute-test {	display: none;}/*styles for 300 and up @ 16px!*//* The max-width declaration below blocks this from ever working */@media only screen and (min-width: 18.75em){	body {		background: yellow;	}}/*styles for 480px - 620px @ 16px!*/@media only screen and (min-width: 30em) and (max-width: 38.75em) {	body {		background: green;	}}@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}/*styles for 800px and up @ 16px!*/@media screen and (min-width: 50em){	body {		background: blue;	}}/*styles for 1100px and up @ 16px!*/@media screen and (min-width: 68.75em){	body {		background: orange;	}}/*one with pixels too! *//* NOTE - if the user were to increase his browser font size to 20px (chrome: Large), 			the above (68.75em) media query will be incorrectly ignored!!!						Assuming 20px browser setting, we would expect to see this progression:			yellow > green > red > blue > NAVY > orange						However, the orange never kicks in... which seems like a browser bug!			Here's the math (assuming 20px browser setting):			1200/20 = 60em     <     68.75em*/@media screen and (min-width: 1200px){	body {		background: navy;	}}@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5),	only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5),	only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2),	only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5),	only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5),	only screen and (min-width: 1250px) and (min-resolution: 1.5dppx),	screen and (min-width: 1250px) {	body {		background-color: pink;	}}

On my device, that claims to be 360px wide, my background color shows blue (on my desktop it shows pink). I would expect it to be yellow.

 

Mind you this works in 3 diff browsers on my mobile phone (all blue background).

 

Ok so let's just try to get something to work for me.

 

I am simply trying to use one stylesheet if the device is this size, and the other if it is that size. I cannot get anything to work unless I add the word device to the query:

<link href="style.css" media="screen and (min-device-width:640px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (max-device-width: 360px)" rel="stylesheet"/>

And even that only works on the Chrome browser on my mobile device (and it works fine, if I load the page in landscape view, style.css will load because my device is 640px wide that way). But I cannot get anything to work in the other browsers.

 

I can however, use min-width and it will render the stylesheet I use it on, but then it of course renders both, not resulting in the correct style.

 

 

I'm getting inconsistency and it is really confusing me.

 

My goal is to change which stylesheet renders based on the size of the device. I am drastically changing the header and navigation so it seems to make more sense than having media queries within the same style sheet that attempts to change the style, I read that is good for minor, subtle changes.

Link to comment
Share on other sites

To try to put it more simply:

<link href="test.css" rel="stylesheet"/><link href="test2.css" media="screen and (min-width:480px)" rel="stylesheet"/>

Works in every browser I try it in. Even on my mobile device that is only 360px wide..why?

<link href="style.css" media="screen and (min-width:800px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (min-width:360px) and (max-width:640px)" rel="stylesheet"/>

Does not work on any browser. Only style.css renders, including on my mobile device.

<link href="style.css" media="screen and (min-device-width:800px)" rel="stylesheet" /><link href="mobileStyle.css" media="screen and (min-device-width:360px) and (max-device-width:640px)" rel="stylesheet"/>

Only mobileStyle.css renders on my mobile device, which is what I want. But it only works on my Chrome browser on my mobile device.

 

 

There's inconsistency because I don't understand why the test code works just fine, but mine does not.

Link to comment
Share on other sites

Can someone at least explain why

<link href="test2.css" media="screen and (min-width: 980px)" rel="stylesheet"/>

loads test2.css on my mobile device that is 360px wide?

 

I need to get a mobile version working but I can't seem to understand this concept of media queries so I can utilize them to different device sizes.

Link to comment
Share on other sites

Have you applied the viewport meta tag?

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

 

Oh perfect, this describes exactly my issue. I guess I'll either need to adjust to how many pixels it is actually viewing or use the viewport and design the site accordingly. Having it not zoom out will suddenly make me need to change more items than intended. But at least now I have a base to work with. I don't understand why all the tutorials I have read I've never came across this, but they always give suggested widths, I usually see around 480px for smartphones.

 

Does anyone know if there is a way to see how many pixels it is actually viewing? The link states Android is as much as 800, but I can set the media query to as high as 980px and it will show the stylesheet. For example, there are sites that will show how many pixels wide a device is, the resolution, etc, is there a way to find out the viewing width or whatever it may be called?

Link to comment
Share on other sites

One last thing. Using media queries to show a webpage differently for mobile devices, how would I give the user the option to view the site normally? Is there a way to change the meta tag to remove "viewport"?

 

I suppose the real issue is being able to control when viewport is enabled. Like, I only want a mobile version for small devices such as smartphones and maybe even smaller tablets. I wouldn't want the screen to not zoom out to exactly the screen size if someone is on a larger tablet and then have to accommodate that screen size.

 

So far what I have put in is

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

On my smartphone, it doesn't zoom out so only shows 360px of the web page (exactly what it is suppose to do) but the problem is that I can still scroll from side to side and certain parts of the web page are still visible beyond the 360px while everything else is cut off. Since I am going to style it to not go beyond a certain amount of pixels this isn't a huge issue, but I would like to understand why certain parts are still visible.

Edited by Spunky
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...