rashidfarooq Posted April 26, 2011 Share Posted April 26, 2011 I have two css external style sheets. One for the 800x600 screen resolution and other for 1200x768. How can I detect the screen resolution and apply the according style sheet using PHP. If I use Javascript, It is possible that the Javascript may not be enable on client side. has some one a better solution? Quote Link to comment Share on other sites More sharing options...
micah1701 Posted April 26, 2011 Share Posted April 26, 2011 nope. javascript is the only way to detect the browser size. default to the smaller 800x600 and, if javascript detects a larger screen swap to the larger css. also, i include this snippet of code at the bottom of my sites: <noscript> <style> #js_is_not_evil { text-align: center; background-color: #990000; color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); position: fixed; bottom: 0; left: 0 } #js_message_txt { background-color: black; opacity: 1 !important; filter: alpha(opacity=100) !important; padding: 0px 10px 0 10px; } </style> <div id="js_is_not_evil"> <span id="js_message_txt">Javascript is not evil. You should turn it on and see how much more fun the web can be!</span> </div> </noscript> Quote Link to comment Share on other sites More sharing options...
PHPSuperNewb Posted April 26, 2011 Share Posted April 26, 2011 try something like this in your <head> <script type="text/javascript"> function getcss(cssfile) { alert(screen.width) loadcss = document.createElement('link') loadcss.setAttribute("rel", "stylesheet") loadcss.setAttribute("type", "text/css") loadcss.setAttribute("href", cssfile) document.getElementsByTagName("head")[0].appendChild(loadcss) } if(screen.width >= '1440' && screen.width <= '1600') // This time we're targeting all resolutions between 1440 and 1600 pixels wide { getcss('templates/css/yourresolution1440x900.css') //And we want to load the .css file named "css/1440.css" } else if(screen.width >= '1024' && screen.width <= '1600') //Targeting screen resolutions between 1024 and 1600px wide { getcss('templates/css/yourresolution1280x1024.css') //Load 1280x1024.css } else if(screen.width >= '800' && screen.width <= '1280') // This time we're targeting all resolutions between 800 and 1280 pixels wide { getcss('templates/css/yourresolution1024x768.css') //And we want to load the .css file named "1024x768.css" } else if (screen.width <= '800') // Defines the resolution range you're targeting (less than 800 pixels wide in this case) { getcss('templates/css/yourresolution800x600.css') // Defines the .css file you want to load for this range (800x600.css) } </script> unfortunately, php can't detect the browser window like micah1701 suggested, tell your users to turn on javascript Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 26, 2011 Share Posted April 26, 2011 Total disagree with default to the smaller 800x600 The most popular screen resolution is 1024 x 768 so set that as the default. You could also add a button to the page to allow users to choose with css file to use. BUT - I don't know why you need this and it may be exactly what is needed - but if there is nothing special that your doing in your site I would look into fluid design. I would think for 98% of all sites you don't need to know the window size for the presentation. Quote Link to comment Share on other sites More sharing options...
rashidfarooq Posted April 26, 2011 Author Share Posted April 26, 2011 Total disagree with default to the smaller 800x600 The most popular screen resolution is 1024 x 768 so set that as the default. You could also add a button to the page to allow users to choose with css file to use. BUT - I don't know why you need this and it may be exactly what is needed - but if there is nothing special that your doing in your site I would look into fluid design. I would think for 98% of all sites you don't need to know the window size for the presentation. Thanks for answering. Quote Link to comment Share on other sites More sharing options...
rashidfarooq Posted April 26, 2011 Author Share Posted April 26, 2011 nope. javascript is the only way to detect the browser size. default to the smaller 800x600 and, if javascript detects a larger screen swap to the larger css. also, i include this snippet of code at the bottom of my sites: <noscript> <style> #js_is_not_evil { text-align: center; background-color: #990000; color: #FFFFFF; width: 100%; opacity: 0.70; filter: alpha(opacity=70); position: fixed; bottom: 0; left: 0 } #js_message_txt { background-color: black; opacity: 1 !important; filter: alpha(opacity=100) !important; padding: 0px 10px 0 10px; } </style> <div id="js_is_not_evil"> <span id="js_message_txt">Javascript is not evil. You should turn it on and see how much more fun the web can be!</span> </div> </noscript> Thanks for answering Quote Link to comment Share on other sites More sharing options...
rashidfarooq Posted April 26, 2011 Author Share Posted April 26, 2011 try something like this in your <head> <script type="text/javascript"> function getcss(cssfile) { alert(screen.width) loadcss = document.createElement('link') loadcss.setAttribute("rel", "stylesheet") loadcss.setAttribute("type", "text/css") loadcss.setAttribute("href", cssfile) document.getElementsByTagName("head")[0].appendChild(loadcss) } if(screen.width >= '1440' && screen.width <= '1600') // This time we're targeting all resolutions between 1440 and 1600 pixels wide { getcss('templates/css/yourresolution1440x900.css') //And we want to load the .css file named "css/1440.css" } else if(screen.width >= '1024' && screen.width <= '1600') //Targeting screen resolutions between 1024 and 1600px wide { getcss('templates/css/yourresolution1280x1024.css') //Load 1280x1024.css } else if(screen.width >= '800' && screen.width <= '1280') // This time we're targeting all resolutions between 800 and 1280 pixels wide { getcss('templates/css/yourresolution1024x768.css') //And we want to load the .css file named "1024x768.css" } else if (screen.width <= '800') // Defines the resolution range you're targeting (less than 800 pixels wide in this case) { getcss('templates/css/yourresolution800x600.css') // Defines the .css file you want to load for this range (800x600.css) } </script> unfortunately, php can't detect the browser window like micah1701 suggested, tell your users to turn on javascript thanks for answering. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.