如何在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 */ 
}