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

  • 2020-03-30 02:43:09
  • OfStack

Using the meta tag "viewport"

The viewport tag contains the following properties:

< img SRC = "border = 0 / / 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); 

setInterval(updateLayout, 400); 

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

Related articles: