Three ways to detect the direction of an iPhone and iPad device

Using the meta tag "viewport"

The viewport tag contains the following properties:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404231537571.gif? 2014323153827 ">  

In order to automatically detect and adapt to the screen width, we should use device-with instead of setting a fixed value. In addition, in order to avoid the user scaling and causing the interface to exceed the screen, we need to set the maximum-scale.

 
<meta name="viewport" content="width=device-width, maximum-scale=1.0" /> 

Using javascript scripts

The following script detects the orientation and adjusts the orientation by detecting the screen width:

 
<script type="text/javascript"> 
var updateLayout = function() { 
if (window.innerWidth != currentWidth) { 
currentWidth = window.innerWidth; 
var orient = (currentWidth == 320) ? "profile" : "landscape"; 
document.body.setAttribute("orient", orient); 
window.scrollTo(0, 1); 
} 
}; 

iPhone.DomLoad(updateLayout); 
setInterval(updateLayout, 400); 
</script> 

The above script can be placed in the head section

Using CSS

Media query using CSS:

 
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">