Link with media checking for screen size

[Bwild]

having an issue linking to the style sheet, if i use the following code it works fine <link type="text/css" href="dsktop.css" rel="stylesheet">but if I try this it fails<link type="text/css" href="dsktop.css" rel="stylesheet" media="screen and (max-width:769px)" >or this<link type="text/css" href="dsktop.css" rel="stylesheet" media="screen and (max-device width:769px)" > it fails my goal here is to have the page load the appropriate style sheet depending on the screen size something like this<link type="text/css" rel="stylesheet" media="screen and (max-width:769px)" href="dsktop.css" ><link type="text/css" rel="stylesheet" media="only screen and (min-width:481px) and max-width:768px)" href="iphone.css"><link type="text/css" rel="stylesheet" media="only screen and (max-width:480px)" href="iphone.css"> on the other side of the coin - should I be using an @Media in cooperation with the @import statement within the main style sheet@media only screen and (max-width:480px) {@import url(iphone.css)} @media only screen and (max-width:480px) {@import url(iphone.css)}@media only screen and (min-width:481px) and (max-width:768px) {@import url(tablet.css)}@media only screen and (max-width:769px) {@import url(dsktop.css)} suggestions or ideas always welcomeThanks Bob

[DarkxPunk]

I recommend the CSS solutions rather than doing it within the HTML. Personally I also like to specify by device and use php to determine what style sheet to use.

[wacsyweezy]

well well well, to me, using PHP and Javascript is the best.. PHP to select the CSS file using the include() or require() function Javascript to get the max width and max height of the device But my own problem is that i don't know how to implement getting the max width and max height using Javascript Thank Weezy

[DarkxPunk]

But my own problem is that i don't know how to implement getting the max width and max height using Javascript

This works for all browsers, and devices. Hope it helps.

var d = document;function getDocumentHeight(){var mx = Math.maxreturn mx(mx(d.body.scrollHeight, d.documentElement.scrollHeight),mx(d.body.offsetHeight, d.documentElement.offsetHeight),mx(d.body.clientHeight, d.documentElement.clientHeight));} function getWindowHeight(){if (window.innerHeight){var mn = Math.min;return mn(d.body.clientHeight, d.documentElement.clientHeight, window.innerHeight)}else if (d.body.clientHeight || d.documentElement.clientHeight){var mn = Math.min;return mn(d.body.clientHeight, d.documentElement.clientHeight)}}if (getDocumentHeight() > getWindowHeight()){alert("Scrollable");}else{alert("Not Scrollable");}

Edited December 20, 2012 by DarkxPunk