• Tutorial List

HTML Responsive Web Design

Last updated Jul 08, 2020
HTML Responsive Web Design

Instead of creating a responsive website, in this tutorial, we will see how to enable the responsiveness of a website.

And it is mandatory (enable the responsiveness of a website) to create a responsive website.


How to enable the responsiveness of a website?

The Meta Viewport is used to enable the responsiveness of a website. It controls the layout of the webpage according to the size of a device.

You have to add the following Meta Viewport code inside the <head> tag to enable the responsiveness.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Meta Viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meta Viewport</title>
</head>
<body>
  ...
</body>
</html>

An Experiment of the Meta Viewport

Without Meta Viewport

Without Meta Viewport
Without Meta Viewport

With Meta Viewport

With Meta Viewport
With Meta Viewport

Ask Questions

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