Html

Meta Viewport

1 min read
avatar
hajarsabrani
Share
Meta Viewport

Meta viewport adalah sebuah tag meta yang digunakan dalam HTML untuk mengontrol tampilan halaman web pada perangkat mobile. Tag ini memberi tahu browser bagaimana halaman harus dikelola dan ditampilkan.

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

Bagaimana Cara Kerjanya?

  • width=device-width: Ini berarti lebar viewport akan sama dengan lebar perangkat fisik. Jadi, halaman akan mengisi seluruh lebar layar perangkat.
  • initial-scale=1.0: Ini menetapkan tingkat zoom awal saat halaman pertama kali dimuat oleh browser.

Mengapa Penting?

Tag ini sangat penting untuk responsifitas sebuah website. Tanpa tag ini, halaman web akan ditampilkan dengan lebar default 980px pada perangkat mobile, yang kemudian menyebabkan pengguna harus melakukan zoom in dan zoom out untuk membaca konten.

Contoh Penggunaan

Berikut adalah contoh penggunaan tag meta viewport dalam sebuah halaman HTML:

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>

Dengan menggunakan tag meta viewport seperti di atas, halaman web Anda akan tampak sempurna di semua perangkat, baik desktop maupun mobile.

Semoga tutorial ini membantu Anda memahami penggunaan dan pentingnya tag meta viewport dalam pengembangan web responsif. Selamat mencoba!

avatar
hajarsabrani
Share

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

three × 3 =

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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

twenty + 4 =