Responsive Design + RESS techniques [duplicate]

Question

This question already has answers here:

Hide div element when screen size is smaller than a specific size (9 answers)

Closed 8 years ago.

I am wondering if something similar to this can be easily done in if/else PHP or Javascript. I have read about the usual ress techniques and I am trying to find a solution that doesn't rely on device detection like WURFL. Maybe what I am looking for is called "conditional loading"?

My goal is to only load the appropriate markup based on screen width exactly like a media query. For instance, I could create a full nav for larger screens and a simple more mobile friendly nav for smaller devices/screens. This would save tons of bandwidth and make the site truly flexible. Thanks for your input!

{ if < 768 }
some code here {html, php, etc}
{ / if}
{ if > 768 }
some code here {html, php, etc}
{ / if}

Answer 1

You can use element.clientWidth for device-width and window.screen.width. Another approach would be window.matchMedia, which is available in fairly every browser.

Answer 2

There are a few ways that these designs can be made. Javascript and php can both be used but will have their querks.

You said that you didn't want to do user agent testing, so that rules out PHP. You could use php to check the user agent by doing $_SERVER['HTTP_USER_AGENT'] and testing for IPhone etc. if you wanted to and then show the content that you wanted within a conditional statement.

Javascript can be used to test for the screen size by using

window.screen.availWidth AND window.availHeight

This will return the available height for the browser that can be occupied by your web browser. For the full resolution use window.screen.width AND window.screen.height

This works on most browsers but comes with one issue. Depending on the pixel depth ratio you may not be able to return the ACTUAL screen resolution. For instance I use a mac that has a retina screen. The javascript listed above shows that my screen width and height is 1280x800 when in fact its 2560x1600 or 2x the return value. You could fix this though by testing for apple products with retina screens and multiplying by two. That said though, his pixel depth doesn't affect the proportions of the objects on the website, it just makes images and video that aren't hidpi look blurry or pixelated.

Hope this helps.