Question

I have problem using js switch ipad & iphone css.

i’m currently setting when

screen.width == 768, height == 481 // will switch to landscape.css 

screen.width == 481, height == 768 // will switch to portrait.css

<script type="text/javascript">
         if ((screen.width == 640) && (screen.height == 480))
            {document.write("<link href='640x480.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 800) && (screen.height == 600))
              {document.write("<link href='800x600.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 1600) && (screen.height == 900))
              { document.write("<link href='main.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 768) && (screen.height == 481))
              { document.write("<link href='landscape.css' rel='stylesheet' type='text/css'>")}

        else if ((screen.width == 481) && (screen.height == 768))
              { document.write("<link href='portrait.css' rel='stylesheet' type='text/css'>")}

        else
              {document.write("<link href='main.css' 'type=text/css' rel='stylesheet' />")}
</script>

Answer 1

You can use CSS media queries in a single stylesheet to achieve this effect:

@media all and (max-width: 640px) {
    /* relevant styles from 640x480.css */
}
@media all and (max-width: 768px) and (orientation: landscape) {
    /* relevant styles from landscape.css */
}