CODEWITHSUNDEEP
iphonecssweborientation
Gmdavid91
Gmdavid91

Reputation: 35

How to change CSS portrait to landscape in iphone?

I am making a website for mobile devices. In android and windows phone it loads the two orientations correctly. On iPhone when you change orientation, it does not load the new css. What can be the solution?

solution:

<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();

Upvotes: 2

Views: 1830

Answers (2)

David Paulsson
David Paulsson

Reputation: 195

Bens answer is the right approach. Although this will probably be for iPads as well and then you can target iPads like this

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

Upvotes: 1

Ben
Ben

Reputation: 10146

You don't need JavaScript to achieve this functionality. Use CSS media queries:

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

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

Or, you could set specific widths for iPhone landscape/portrait if you wished.

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

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

Upvotes: 4

Related Questions