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:

  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.