Open In App

How to set the view-port meta tag for iPhone that handles rotation properly ?

The view-port meta is a short tag that is included in the head of the HTML document that tells the browser how the page should be rendered. The view-port meta element is what turns a regular website page into a responsive page.

Options of the View-port meta tag: There are many options that can be included in the content section of the meta view-port:



By default, the view-port tag is used as follows:




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
    <meta name="viewport" content=
        "width=device-width;
        initial-scale=1.0;
        maximum-scale=1.0;" />
</head>
  
<body>
    <h2>Welcome To GFG</h2>
  
    <p>
        Default code has been 
        loaded into the Editor.
    </p>
</body>
  
</html>

Problem with this meta tag on some devices: The default usage of the meta tag gives rise to some problems on iPhone devices and some Android phones. This occurs when the orientation of the screen changes (portrait to landscape). 



This occurs because the size of the content remains the same as it were in portrait mode even if the device has been rotated to landscape mode. This usually happens due to the “width” attribute that is set to “device-width” in the meta tag. As the width of view-port and device are different, when the screen is rotated to landscape mode, theoretically the view-port width should change to device height but this cannot be implemented efficiently.

The solution to this can be implemented as follows:




<!DOCTYPE html>
<html>
  
<head>
    <title>Page Title</title>
    <meta name="viewport" content=
            "initial-scale=1.0; 
            maximum-scale=1.0" />
</head>
  
<body>
    <h2>Welcome To GFG</h2>
  
    <p>
        Default code has been 
        loaded into the Editor.
    </p>
</body>
  
</html>

Advantage of using this method:

Disadvantage of using this method:

Output on an iPhone device:

Portrait mode:


Article Tags :