動態iPad和iPhone的css開關

我有問題使用js開關ipad & iphone css。動態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>

來源

2013-02-18 chien pin wang

你爲什麼不只是使用CSS媒體查詢？ – 2013-02-18 04:31:22

CSS'media'查詢的一些文檔：https：//developer.mozilla.org/en-US/docs/CSS/Media_queries（你可能對'@media（min-width：700px）'和'orientation ：風景）{...}'） – ajp15243 2013-02-18 04:34:42

您可以使用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 */ 
}

來源

2013-02-18 04:35:40

動態iPad和iPhone的css開關

回答

相關問題