How does WPT respond to responsive layouts?

[grif]

Thanks for the link, that was interesting, though it left alot to be explained. One of the links it referenced on responsive images seemed to resort to various tactics for replacing only img elements instead of just checking window size and loading an independent page version for that size, but maybe they are just creating extra work in order to cut corners on complete size dependent rewrites.

As for the media query approach, I read that media queries do in fact prevent downloading on unused resources, but only if you set a min and max (a range essentially) for the specific size your serving. That would make sense as setting only one test would often qualify all elements. I guess i'll find out soon enough.

Edit: I found the page that was mentioning media queries effectiveness. It was actually describing how to make bg images not load:

Quote: Using CSS media query to set display:none on an element containing a background image does not prevent Mobile Safari from downloading it.2
Using CSS media query to override a background image with one created specifically for mobile results in both the desktop and the mobile image getting downloaded.4

Two methods that appear to work are:

Setting the parent of an element with a background image to display:none.3
Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.5

That last note might work for other elements too. The downside to the js approach of serving different pages:

Quote:If you send a link from the mobile site and someone opens it on their desktop browser, it is still formatted for mobile.

Which is painfully true for text based sites, luckily i dont have to worry about this one. Media queries is the superior method if it can do so without downloading all versions of a page. Im surprised there arent more write-ups about this.