Using the meta tag “viewport”

The viewport tag contains the following properties:

 

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