Three ways to detect the direction of Iphone/ipad equipment _javascript Skills

Use meta tag "viewport"

The viewport tag contains the following properties:



In order to automatically detect and fit to the screen width, you should use Device-with instead of setting a fixed value, in addition to avoid user scaling resulting in the interface beyond the screen, you need to set the Maximum-scale,

Copy Code code as follows:

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

Using JavaScript scripts

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

Copy Code code as follows:

<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:

Copy Code code as follows:

<link rel= "stylesheet" media= "All and (orientation:portrait)" href= " Portrait.css ">
<link rel=" stylesheet "media=" All and (Orientation:landscape) "href=" Landscape.css ">