如何在iphone中将CSS肖像更改为横向?

时间:2013-08-06 07:26:23

标签: iphone css web orientation

我正在为移动设备制作网站。 在Android和Windows手机中,它正确加载两个方向。 在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();  

2 个答案:

答案 0 :(得分:3)

您无需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 */
}

答案 1 :(得分:1)

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