I Am a Genius: listen to my words

I Have the Conch


listen to my words

Archive for June, 2014

Media Query Update

So I did some more tinkering. I figured, there has to be a way this makes sense.

Especially since I spent another day at work working with a page with these declarations that is working exactly as intended:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="styles/rplo-iphone5.css">
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='styles/rplo-iphone5.css' />

I did a version of my page from the last post that had this:

@media only screen and (min-width:300px) and (max-width:309px) { body { background-color: rgb(0,1,0) } }
@media only screen and (min-width:310px) and (max-width:319px) { body { background-color: rgb(0,2,0) } }
@media only screen and (min-width:320px) and (max-width:329px) { body { background-color: rgb(0,3,0) } }
...

on up to 1609px.

Every mobile device/browser matched the 980-989 range. Just like I expected from my last results.

Honestly, I have no idea how to begin to reconcile the behavior between those two segments of code. It makes zero sense to me.

So I finally tried using min-device-width and max-device-width.

@media only screen and (min-device-width:300px) and (max-device-width:309px) { body { background-color: rgb(0,1,0) } }
@media only screen and (min-device-width:310px) and (max-device-width:319px) { body { background-color: rgb(0,2,0) } }
@media only screen and (min-device-width:320px) and (max-device-width:329px) { body { background-color: rgb(0,3,0) } }
...

This one gave me usable results. For the first time. Ever.

But it’s still pretty frigging weird.

Chrome and Firefox, on my Samsung Galaxy SIII, agree that in portrait, the device-width is 360px, and that in Landscape the device-width is 640px.

The built-in default browser, however, insists that the device-width is 720px no matter what orientation the device is. I’ve no idea where it gets that number. It’s like the developers choose it from a hat full of slips of paper with pixel resolutions written on them.

I can understand reporting an identical device-width no matter the orientation, I guess. There’s an argument to be made that the device-width hasn’t changed just because you turned the device. It’s a completely impractical and useless argument, but at least it’s there. And there’s precedent. iOS reports (using Chrome or Safari) the same device-width no matter which orientation you hold the device (on this iPhone 5 that device-width is 320px, and on the iPad Air it is 760px). This is another reason for me to hate Apple, but at least it’s consistent.

Android’s default browser giving me 720px is like saying that 1+1=2, or 3 for especially large values of 1.

But, still, at least I can use it.

You can make media queries that fit those device-widths without much of a problem

/* iPhone 5, portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 359px) and (orientation: portrait) {}
/* iPhone 5, landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 359px) and (orientation: landscape) {}
/* Android Chrome, Firefox, or default, portrait */
@media only screen and (min-device-width: 360px) and (max-device-width: 639px),
only screen and (min-device-width:720px) and (max-device-width:1000px) and (orientation: portrait) {}
/* Android Chrome, Firefox, or default, landscape*/
@media only screen and (min-device-width: 640px) and (max-device-width: 719px),
only screen and (min-device-width:720px) and (max-device-width:1000px) and (orientation: landscape) {}

Note that the 1000px measure there is an arbitrary number.

I will probably do something like this to get a measure in em. And maybe do it with device-height as well. Just to see if I get something else useful.