Как сменить портрет CSS на пейзаж в iphone?

Question

Я делаю сайт для мобильных устройств. В телефоне Android и телефона он загружает две ориентации правильно. На 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

Ответ на бенз - это правильный подход. Хотя это, вероятно, будет также для iPads, а затем вы можете настроить таргетинг на 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 */ 
}