Html

Meta Viewport

1 min read
avatar
hajarsabrani
Share

The viewport meta is a meta tag used in HTML to control the display of web pages on mobile devices.
It tells the browser how the page should be managed and displayed.

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

How does it work?

  • width=device-width: This means that the width of the viewport will be equal to the width of the physical device.
    So, the page will fill the entire width of the device screen.
  • initial-scale=1.0: This sets the initial zoom level when the page is first loaded by the browser.

Why is it important?

This tag is very important for the responsiveness of a website.
Without this tag, web pages will be displayed with a default width of 980px on mobile devices, which then causes users to have to zoom in and out to read the content.

Usage Example

Here is an example of using the viewport meta tag in an HTML page:

HTML
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Penggunaan Meta Viewport</title>
</head>
<body>
    <h1>Selamat datang di website kami!</h1>
    <p>Website ini responsif berkat penggunaan meta viewport.</p>
</body>
</html>

By using the viewport meta tag as above, your web page will look perfect on all devices, both desktop and mobile.

Hopefully, this tutorial has helped you understand the use and importance of the viewport meta tag in responsive web development. Good luck!

avatar
hajarsabrani
Share

Leave a Reply

Your email address will not be published. Required fields are marked *

× Chat