I Am a Genius: listen to my words

I Have the Conch


listen to my words

Archive for May, 2014

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.

Take My Wife … for example

For a guy who thinks of himself as a writer I become exceedingly poor with words when it comes to real things.1

At any rate, I always have a difficult time expressing myself, rather than making something up. I have imagination, but not sincerity, maybe.

And so I struggle to tell my wife what she means to me. Frankly, My family would fall apart without her. I would fall apart with out her. I can barely keep track of my own needs let alone the needs of everyone else.2

But that sounds infantile. She’s not my mom. And I don’t think she wants to be remembered as the person who keeps it all together. At least, not just that. I’m sure she doesn’t mind being thought of as capable. But after all, she’s intelligent and beautiful as well.

And I hope by now my fumbling has demonstrated that I wasn’t lying in the first few sentences.

It’s more than her leadership. Her touch is comforting in a way that I find completely inexplicable. I wake in the night, and I can reach out and just touch her back with my fingers, and suddenly I can go back to sleep. It’s more than confirmation that I’m not alone — although it is that in a very existential way. It’s even more than confirmation that we’re extensions of each other. It’s confirmation that things are OK. That things are as they should be, even if they’re not ideal.

Her touch works other times. I mean, it’s fun to hold my three year old and hug my children. But when Kirsti just runs her fingers quickly over my shoulder, there’s connection and calming.

I don’t know that I’ll ever be able to explain what she means to me, what she is to me. Or why. And right now I find that I’m out of ways to try. But she’s central to my life. Marrying her was completing myself.


  1. Maybe I just make up stories, and am less a wordsmith 

  2. I can feed the cat, but he doesn’t even use his litter box, so he requires very little attention to be happy