LebTechs

Tarek

Administrator

Registered: 2012-09-24

Posts: 50

Re: How to detect screen resolution and use different css

Something i learned while googling and im using the below code on this site thought of sharing it as i got a new galaxy tab 10.1

<script type="text/javascript">

function getcss(cssfile){

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 <= '800') 

{

getcss('style/mobile/mobile.css')

}

else if(screen.width > '800' )

{

getcss('style/mobile/tablet.css')

}

</script>

Enjoy

Tarek

Administrator

Registered: 2012-09-24

Posts: 50

Re: How to detect screen resolution and use different css

If you care about orientation use the below code

<script type="text/javascript">

function getcss(cssfile){

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.height > '1000')

{

getcss('style/mobile/tablet.css')

}



else if(screen.width <= '1000') 

{

getcss('style/mobile/mobile.css')

}



else if(screen.width > '1000')

{

getcss('style/mobile/tablet.css')

}



</script>

the difference between the first one and the second one:

• Height > 1000px ==> tablet.css

  Height < 1000px and width < 1000px ==> mobile.css

  Height < 1000px and width > 1000px ==> tablet.css

All three combination will provide the needed css even if the device is loaded on landscape mode or vertical/normal mode

Enjoy.