Definition of CSS Viewport
CSS Viewport is defined as the visible area on a window screen which refers to the displays of the mobile devices. Adding CSS <meta> tag with viewport is an efficient way to improve the web pages to look on smaller screens. The ViewPort is not the same size as the original Webpage. It is not a standard but still tagged as a key approach for Responsive Web Design. In simple terms, viewport helps web browsers to break pages and add them on a small screen in a readable format (prevents side scroll). Here Let’s learn the Viewport meta tag in our CSS.
Syntax and Parameters
We can integrate this CSS viewport in two ways. One by CSS and the other by HTML document. The general syntax looks like the following:
Using CSS @viewport rule
@viewport {
width: device-width;
zoom: 1.1;
min-zoom: 0.4;
max-zoom: 2;
user-zoom: fixed;
}
This rule has the following parameters
- Width: It adjusts to the device in a normal or landscape view. It takes values like auto, device-width, device-height, length, percentage. And width sets shorthand properties namely max and min-width.
- Zoom: It sets for zooming by giving initial-scale in the meta tag. Even this control min and max zoom factor. A zoom factor 1.0 or 100% implies no zooming. Here the larger values make zoom in and smaller values do zoom out.
- Orientation Descriptor: It helps in making the document display to view in portrait or landscape.
In HTML document
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the general format of Viewport used in different mobile-optimized Websites. Well, Here the meta viewport tag has to do some settings for changing the scale point of the viewport. The parameter content=” width=device-width sets the width of the page to respond to the width of the screen. The second parameter initial-scale=1 helps in setting the initial zoom point of the page. We can make use of height value to determine the height of the screen.
How to Use Viewport in CSS?
In this article, we will give you how to use a viewport to enlarge the screen size in the browsers. So, let’s get started. The viewport can be imported in HTML in two ways: One is directly using in the document and the other way is by referencing CSS files. Specifying using the CSS file is done at the beginning of the file to display the output perfectly. To target a good responsive web page, it is suggested to have a device with CSS and adding some styles to it. One of the primary roles in any responsive design is a viewport Size.
For example
@viewport {
width: 640px;
}
Here we had set the width into number value 640px also we can add auto it. Next, I combine this viewport to media rules to optimize the layout where the viewport rule is nested inside.
4.5 (7,540 ratings)
View Course
article, main {width :100%;}
@media screen and (min-width: 40px) {
article {float:right; width:70%;}
Main {float:right;width: 77%;}
}
@media screen and (min-width: 400px)
{article {padding: 30px;
}
}
When coming to browser Support this @viewport in CSS supports only in Internet Explorer and Opera.We have seen a few steps of using Viewport with which you will get to know the usage of them in daily web design development. And also, it falls under the new CSS feature to optimize the websites for different devices.
Examples of CSS Viewport
Here Let’s see some examples with the viewport in action.
Example #1 – Simple Example with meta tag
<!DOCTYPE html>
<html>
<head>
<title>EDUCBA- Education Management</title>
<meta charset="utf-8" name="viewport"
content= "width=device-width, initial-scale=1.0">
<style>
.edu {
font-size:30px;
font-weight:bold;
color:red;
text-align:center;
}
.edum {
font-size:19px;
text-align:center;
}
p {
color :aqua;
text-align:justify;
}
</style>
</head>
<body>
<div class = "edu">EDUCBA- Education Management</div>
<div class = "edum"> Trending New Courses - EDUCBA</div>
<p>EDUCBA is a high-level trusted Asia's Largest Open Online learning with over 4500+ courses which covers domains like finance, business, data analytics.With Professionals froexperts industriescovering new courses daily. The company size has 51- 200 employees ana the specialists in E-Learning, Research and consulting. </p>
<p> Data Science Course taught by experts in Data Science which covers data Science Certification along with this training. Mastering new skills with real-time easy projects and could get personalized course recommendations </p>
</body>
</html>
As we can see in the above code that the content is displayed in a landscape orientation defined with device width.
Output:
Example #2 – With CSS @viewport.
<!doctype html>
<html>
<head>
<style>
@viewport { width: auto; }
@media (max-width: 600px) {
@viewport { width: 620px; }
}
body {
margin: 1;
}
img {
min-width: 505px;
}
h1
{ color: red;
}
</style>
<title>Viewport Example with Media rule</title>
</head>
<body>
<h1> Viewport Example- Media rule in CSS </h1>
<imgsrc="lights.jpg">
</body>
</html>
The above code makes the image to fit with the width size of the viewport.
Output:
Example #3 – Combining media + viewport
<!doctype html>
<html>
<head>
<style>
@viewport {
width: 320;
}
@media screen and (min-width: 420px) {
div { color: aqua; }
}
@media screen and (max-width: 420px) {
div { color: green; }
}
body {
margin: 1;
}
img {
min-width: 500px;
}
h1
{ color: red;
}
</style>
<title>Viewport Example 2 with Media rule</title>
</head>
<body>
<h1> Viewport Example- Media rule in CSS </h1>
<div> PICTURE </div>
<imgsrc="frankfurt.jpg">
</body>
</html>
Here I have used a combination with a query called media and rendered the viewport width to 420px. The user selects this size and scales the layout to fit the respective space in the display.
Output:
Example #4
<!doctype html>
<html>
<head>
<title>My @viewport Rule with auto value</title>
<style>
@viewport {width: auto;}
</style>
</head>
<body>
<h1>My @viewport Rule with auto value </h1>
Responsive Web page promotes in creating a web pages to look good on all devices.
It seeks help on CSS file to resize. This sets the viewport of a page to make a good control on dimensions and scaling.
</body>
</html>
The above code is done very simple to demonstrate the document with any size viewport using auto. The output looks like this.
Output:
Conclusion
To summarize the Viewports in CSS – We have discussed the ways of implementing Viewport in CSS with a demonstration. It is done in the context of either HTML code or CSS file to ensure proper display on mobile devices. Through this viewport tag into CSS, it is said that we are building a flexible layout and it is good to go in the website development.
Recommended Articles
This is a guide to CSS Viewport. Here we also discuss the definition and how to use viewport in css? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
