如何在 iPhone 中将 CSS 纵向更改为横向？答案

【问题标题】：How to change CSS portrait to landscape in iphone?如何在 iPhone 中将 CSS 纵向更改为横向？
【发布时间】：2013-08-06 16:51:45
【问题描述】：

我正在为移动设备制作网站。在 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();

【问题讨论】：

您是否使用媒体查询来调整大小？ Javascript？向我们展示您的代码，否则没有人可以帮助您

标签： iphone css web orientation

【解决方案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 */
}

【讨论】：

【解决方案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 */
}

【讨论】：