如何在iPhone中將CSS肖像更改爲橫向？

Question

我正在爲移動設備製作網站。 在android和windows phone中，它會正確加載兩個方向。 在iPhone上改變方向時，它不加載新的CSS。 什麼是解決方案？

解決方案：

<script type="text/javascript"> 
function orient() 
{ 
    switch(window.orientation){  
      case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css"; 
      break; 

      case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css"; 
      break; 

      case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css"; 
      break; 

} 

window.onload = orient(); 

Answer 1

你不需要JavaScript來實現這一功能。使用CSS媒體查詢：

@media only screen and (orientation : portrait) { 
/* Portrait styles */ 
} 

@media only screen and (orientation : landscape) { 
/* Landscape styles */ 
} 

或者，如果您願意，您可以爲iPhone風景/肖像設置特定的寬度。

@media only screen and (min-width:320px) and (max-width:479px) { 
/* Portrait styles */ 
} 

@media only screen and (min-width:480px) { 
/* Landscape styles */ 
} 

Answer 2

Bens的答案是正確的做法。雖然這可能也適用於iPad，然後你可以像這樣的目標iPad

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
}