Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  • width: It is used to set the width of the layout view-port. In our case, we set this to the “device-width” which overrides Apple’s default setting of 960px.
  • initial-scale: It is used to set the initial zoom of the page and the width of the layout view-port. We set this to 1 which is the default view, but you can easily increase this number (not recommended).
  • minimum-scale: It is used to set the minimum zoom level i.e. how much the user can zoom out.
  • maximum-scale: It is used to set the maximum zoom level, i.e. how much the user can zoom in.
  • user-scalable: It is used to set whether the user is allowed to zoom the content. Setting it to “no” would prevent zooming.

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

HTML




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

HTML




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

  • This seems to lock the device into 1.0 scale regardless of it’s orientation.

Disadvantage of using this method:

  • It completely disables user scaling (pinch zooming, etc).

Output on an iPhone device:

Portrait mode:

  • Landscape mode:



Last Updated : 11 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads