javascript - 动态 iPad & iPhone css 切换

Question

我在使用 js 切换 ipad 和 iphone css 时遇到问题。

我目前正在设置什么时候

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

您可以在单个样式表中使用 CSS 媒体查询来实现此效果:

@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 */
}