Media queries question

do those lovely CSS3 media queries detect BROWSER win dimensions or SCREEN dimensions?
(which is a huge difference, of course…)

thank you…

It’s kind of a hairier issue than that. I’m still not clear on it all, but each device has a set pixel width that you design for, even if that’s not the actual pixel dimension of the screen. For example, the iPhone in portrait mode pretends that it is 320px wide, when in fact is has many more pixels than that (well, the latest ones do … but to keep things consistent across all models, they all respond to the same media query of screen only and (max-width: 320px) … which is kind of handy).

There is a somewhat confusing difference, though, between device viewport and the default layout viewport, which is much wider than the actual device viewport. So you need a meta tag to make the two equal:

<meta name="viewport" width="device-width"> 

… I keep thinking I understand the basics of all this, but each next time I deal with it I’m confused again, so let someone else explain it:

One thing I know absolutely for sure because of it’s display in my Asus Nexus 7: this code …

@media only screen and (max-width: 767px)

… will show single-column in my Zurb Foundation app when the device is vertical, and two columns when sideways, when leaving the media queries as-is. This means it will show two columns on an iPad mini and iPad because they are both more than 768px screen width.

hmmm… this is a bit confusing… by “default layout viewport” you mean what, exactly? a browser?

I’m basically starting out with responsive design… first, am mostly trying to find a good set of media queries…
what about this one?

at home I can only test in my MacBook Pro and iPhone3… the media query from this set that the iPhone responds to is this one:

@media only screen 
     and (min-device-width : 320px) 
    and (max-device-width : 480px) {
           ................
}

I just realized this pg is kinda old… :wink: so would this media query work for that new Samsung phone? the screens on those are huge…

also, are there any reliable testers online? the few I have looked at don’t work at all… for example this one and [URL=“http://mattkersley.com/responsive/”]this one;
mine, a very rudimentary layout for now since I’m just getting started, doesn’t look at all like it looks in my iPhone in either one of these testers…
(and since – apart from my laptop – I can only test in iPhone, have media query for smartphone only…)
in iPhone it looks exactly how I want it to… in both portrait and landscape…

thank you…

As I said, it’s a tricky concept, which benefits from graphics to help explain, so read that link I posted, as it gooes into a lot of detail. (Maybe grab a cup of tea while you read through it. It’s worth it.)

The problem with max-width 480px is that some devices are larger than that, so you need to account for some other situations. If you scale down your browser, for a while (before it hits 480px, the two sections site atop each other at width 50%. You need to deal with that situation too. Just use min-width/max-width, rather than min-device-width/max-device-width too, as recommended in the link I gave.

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
}

Otherwise, what you’ve done is OK.

In terms of testing, there are various tools. For iPhone/iPad, apart from the device itself there is the emulators provided with Apple’s free developer tools:

https://developer.apple.com/devcenter/ios/index.action

Short of that, there are tools like Sauce Labs: https://saucelabs.com/

And, of course, there’s your local phone shop, where you can go and surreptitiously test devices. :smiley:

thank you for your responses… still trying to figure out what the best media queries are… obviously this varies from layout to layout…

this site is often touted as one of the best responsive design examples…

one of their media queries is

   [INDENT]
[FONT=Courier New]
@media screen and (min-width: 620px) { 
       #contain {margin: 0 auto 10px; width: 93.75%;	  /* 960/1024 */
}
[/FONT]

[/INDENT]

to set the width of their main wrapper container…

that width (620px) does not appear here at all…
so for what device is this the cut-off? (and what does /* 960/1024 */ refer to, if the media query is 620px??)

yes I read this page, I had seen it before…
I’m afraid I still don’t get what the “default layout viewport” is… I don’t really understand the explanation on this page…

Now what is the layout viewport? It’s the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.

and they show a diagram of this “default layout viewport” that is much wider than the device… I don’t get this… and is this something that applies at all to desktop and laptop machines? and if not, why is this an issue only on mobile devices?

here the explanation of the difference is:

Sometimes you’ll see developers making calls to device-width or width. The difference between these two here is that device width is going by the set width of your device, with any zoom type changes being ignored.

yeah? and the “width” alone? he only explains what one of them is (the easiest one to understand) he doesn’t explain what just “width” is for…:wink:

so: i’m still confused about whether to use device-width or just ‘width’…

one more thing: there’s an very poignant comment here:

…I cannot help but observe that pages coded in HTML 1 or 2 without CSS exhibit all the attributes of RWD with no designer effort required. The browser will do a fine job on its own if not forced by an appearance-driven designer.

Once the designer attempts to impose his own preferences on the user, then unnatural acts like RWD are required to maintain usability. Simpler is faster and better.

(obviously wouldn’t be the case if you have floats…:wink: but is probably very true for simple layouts
(although I can’t help commenting that with tables you can do “floats” without css… (i.e., elems that are side-by-side, no need for css…:wink: ironic to say the least… :~))

thank you…

the iOS simulator is great!!! :slight_smile:

has iPhone & iPad… and you can flip them… it’s awesome…

thank you…

PS: so I added more media queries

am I doing the right thing so far? :wink:

thank you…

The trick with media rules is to forget about devices and focus on your design. There are far too many devices to cater for, but you can look at your own layout and work out where you need to set breakpoints. That is, at what width does it become impractical for two elements to sit side by side? The site above has obviously decided that at a width of 620px it’s best to adjust the layout, so that’s what they’ve done. It’s different for each site.

Looking at your page right now, if you slowly reduce the width of the browser, you’ll see the boxes suddenly sit on top of each other, which is fine, but at a smaller width the boxes suddenly fill only half the width of the screen. So you need to test this yourself and make sure you’ve accounted for the design at each width range.

As I said, forget about devices, and focus on what your design needs.

thank you so much, Ralph…

could you pls look again?

I just dragged bottom right corner of browser window (both FF & Chrome); I don’t see what you see…

the boxes resize and get stacked as soon as it reaches the “threshold”…

thank you…

From about 740px and down to around 470px this is the view (except that about half way the background goes white):

oh brother… I cannot reproduce this at all… just tried again, on Chrome & FF…

just goes to show how tricky this is…

in mine, as soon as the header changes from min width:620px; to

min width:768px;
min width:620px;

the boxes chg to width 100% and get stacked…

ok, thank you Ralph…

I wonder how you are testing this. In all my browsers, as you gradually narrow them down (by pulling the bottom left corner) you see the layout gradually change, including what I posted. It’s a very handy way to test the page.

yes that’s what I’m doing (only am on a mac, so can only resize browser window from lower right corner…:wink: but that’s the same thing I’m doing…

right now took out the “max” part of the media queries… (since you mention at beginning of this thread that that could be a problem…) and oh brother… now find have to specify everything in all media queries… if something has to appear only under one media query hiding it on default is not enough… I have to hide all the others (using their id’s) under all other media queries…

(perfect example in my page is h1 & h2… saying h1 {display:none} in default CSS is not enough; afterwards in all media queries I have to hide all the others, using their id’s… (or am I missing something?)

orig is still here; new one, where I took out “max” from media queries is [URL=“http://mayacove.com/dev/rd/index2.html”]this one

thank you…

I’m mobile atm, so can’t check the new version. I don’t like the idea of display none for elements, but anyhow, you would have to set something different in each query, yes.

A better approach to all this might be to go the ‘mobile first’ route, where your default styles stack the divs vertically, and then just float them on bigger screens.

thank you very much for your help, Ralph… I appreciate it even more given you’re now the temp admin for this forum… :slight_smile:

I think I need to buy a book… any of these jump out at you? I know there are a lot of good tutorials online for everything, but when I need to seriously learn something I like to get a book (as long as it’s good… I’ve bought bad books too…:wink: it’s how I learned ajax and jquery, just went thru the whole book (or almost the whole book…:wink:

I will attempt to start over now, and do what you suggested (make the stuff for the smallest screens the default and go from there…)

thank you again…

oh – and I have two more quick questions:

  1. what exactly is this for?
[INDENT][FONT=Courier New]
@media screen and (max-device-width: 810px) {
	* { -webkit-text-size-adjust: 100%; }
}
[/FONT][/INDENT]
  1. what is this tag for?
[INDENT][FONT=Courier New]<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
[/FONT][/INDENT]

I found both of these at bostonglobe.com, but I see them everywhere…

thank you…

Probably any one of them would be fine, but the only one I’ve read is Marcotte’s short book on the subject. In a way, it’s not really a big subject, but just a small aspect of CSS, so Marcotte’s short book may be all that’s needed.

Devices like iPhone sometimes decide to resize parts of your text for ‘optimal viewing’ or something, but usually it just makes an annoying mess of your text and layout, so this rule stops it happening. Mind you, I prefer to write it as:

body { -webkit-text-size-adjust: 100%; }
  1. what is this tag for?
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

It’s some kind of message to IE to behave in a certain way—I don’t really understand it—but I’ve seen it cause problems around here. The only message I like to send to IE is ** **** ******** <profanity deleted>.

I wouldn’t bother with it, personally, but it’s up to you. I’m sure its purpose must be explained somewhere, but I’m not that interested.

so how is this, Ralph? :slight_smile:
(main breaking point is from portrait to landscape on tablets… maybe not too good usability-wise, but I did it just as an exercise…)

I think I’m getting the knack of this… :wink: I just have one question… is there a way, where the boxes are side-by-side and floated, to distribute them evenly across the width of their container?

this is a very useful page… but am a bit confused about what he says about the margins… I set the margins for the boxes in %ges [URL=“http://mayacove.com/dev/rd/index3a.html”]here, but they’re still not evenly distributed… is there a way to do this (with just CSS, no JS? :wink:

thank you…