I Am a Genius: listen to my words

I Have the Conch


listen to my words

Media Queries

“I seem to be having tremendous difficulty with my lifestyle…” er… media queries.

I’ve been working with a bunch trying to come up with a definitive set of queries to make CSS work across browsers so I can just copy those queries as needed from page to page.

Except, they don’t work consistently.

At work we have a page that uses this set of link declarations on one page:


<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/iphone4.css' />
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='css/iphone5.css' />
<link rel='stylesheet' media='screen and (min-width: 600px) and (max-width: 1024px)' href='css/tablet.css' />

It seems to work pretty good for iPhone and iPad, though less so for Android.

But I was experimenting to find what worked. What was the min-width for various devices.

I have a Samsung Galaxy SIII with Chrome, Firefox, and the default browser.
I have an iPhone (5, I think?) with Chrome and Safari
I have an iPad3 with Chrome and Safari.

I wrote a PHP script to generate a style sheet with media queries incrementing the min-width by 10. Like thus:


@media screen and (min-width: 320px){body{background-color: rgb(0,0,1)}}
@media screen and (min-width: 330px){body{background-color: rgb(0,0,2)}}
@media screen and (min-width: 340px){body{background-color: rgb(0,0,3)}}
@media screen and (min-width: 350px){body{background-color: rgb(0,0,4)}}
...

…and so on, up to 1260px. Note that the color gradation was very subtle, so I included a JavaScript statement to tell me the color value actually being used. From that I could see which media query matched.

It wasn’t helpful because all three devices, in all their browsers, told me that the color was rgb(0,0,67). Which corresponded to 980pxs. It did this in portrait AND landscape orientations. The only exception was Firefox on the Galaxy. It matched something like 530px, but only in portrait. In landscape it was 980px.

However, I’ve also had people observe that linking stylesheets works differently (read, “better”) than inline media queries. So I did the same thing, only using stylesheets.


<link rel="stylesheet" media="screen and (min-width:320px) href="style320.css">
<link rel="stylesheet" media="screen and (min-width:330px) href="style330.css">
<link rel="stylesheet" media="screen and (min-width:340px) href="style340.css">
<link rel="stylesheet" media="screen and (min-width:350px) href="style350.css">

I got identical results.

I have a coworker who testifies to the True Nature of the media queries we use on the functional page mentioned above.

So I made this page:


<html>
<head>
<title>css test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body { background-color: #000; color: #fff; }
</style>
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='style320.css' />
<link rel='stylesheet' media='screen and (min-width: 600px) and (max-width: 1024px)' href='style600.css' />
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='style560.css' />
</head>
<body>
<script>
$(document).ready(function(){
switch ($('body').css('background-color')) {
case 'rgb(0, 0, 3)':
$('body').prepend('Document matches this media query: screen and (min-width: 320px) and (max-width: 480px)');
break;
case 'rgb(0, 0, 27':
$('body').prepend('Document matches this media query: screen and (min-width: 560px) and (max-width: 720px)');
break;
case 'rgb(0, 0, 31)':
$('body').prepend('Document matches this media query: screen and (min-width: 600px) and (max-width: 1024px)');
break;
default:
$('body').prepend('Document does match any media query you defined').
break;
}
})
</script>
</body>
</html>

The page (with lots of commented code from other experiments) can be found at http://herbertlives.com/misc/mq

All it does is use media queries to decide which stylesheet to use.
The stylesheets each have one declaration, the color of the body background.
The JavaScript/jQuery detects the background color, and depending on what it gets, prints out what query matched.

Android Chrome

Android Chrome

Android Firefox

Android Firefox

Everything iPhone and iPad matched Android Chrome. Which, it should be noted, is the range that 980px fits in. Firefox was the confusing one, because… 530px doesn’t fit between 320 and 480.

I’ve seen a lot of “lessons” and “tutorials” and “sample code” that give example queries. They all seem to go with the iPhone declared screen size of 320px and browser reported size of 640px. And none of them work like I expect them too.

I’m left believing that web pages must be styled according to target device, not screen sizes.

If I’m doing something wrong, feel free to tell me what it is. I’d like the world of web development to make some sort of fracking sense once in a while, and human error in this project would explain a lot.

Leave a Reply