Makers Byte
Published in

Makers Byte

How to configure the viewport?

Setting up viewport for pages

A Viewport help users see the web content properly on different sized screens such as mobile devices or tablets. It’s basically a meta viewport tag which gives browser instructions on how to control the page’s dimensions and scaling. This way a site becomes responsive to multiple platforms.

How to configure the Viewport?

Setting up viewport is very simple. There is a small snippet of code Google recommends to add as a meta tag for a responsive website.

<!DOCTYPE html>
<html lang="en">
<head>

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

</head>

Here’s what each key-value pair does:

  • width=device-width It sets the width of the page equal to the size of the screen the site is shown
  • initial-scale=1 It basically scales the size as per the value you have, normally for standard sites it is 1 while you can zoom out as well via using values such as 0.5 (Will show half of the size) or any other till 1.

How to check your viewport

To check whether your page is configured for viewport tag correctly, you can simply view source the page and then search for the tag with name=viewport

More Resources

--

--

--

Resource hub for Designers/Developers

Recommended from Medium

Computer Graphics Lab 5

Understanding MySQL Multiversion Concurrency Control

Generalising Binary Search

Client Focused Software Development: What does client focused mean? Just the Basic

DevSecOps The Next Industrial Revolution | Compunnel Digital

BDD Addict Newsletter April 2019

Performance Vs Scalability

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shahzaib Khan

Shahzaib Khan

Data Scientist, Developer, Tech Writer, Entrepreneur and Computer Science Enthusiast. Connect at https://www.linkedin.com/in/shahzaibkhan/

More from Medium

Quick guide on custom web page design — do’s don'ts get to #1 on Google (level: beginner)

An image depicting the difference in server side vs client side web languages

How to Deploy a Static Website for Free Using Github Pages

Host a Free Static Website in 5 minutes with Github Pages

Creating a developer portfolio from scratch