CSS @viewport

Viewport Css

@viewport is mainly used to display the web page properly in the browser on a responsive screen. If you want to show your web page in the mobile device in perfect view we used the media query. We can set the width, height, size etc for each element when we view in the mobile device.

Using this viewport CSS selector to set the min and max width, min and max height, min and max zoom, set initial scaling and disable user scaling in the browser in the responsive view.

What is the property used in the @viewport:

min-width: It set the minimum width of the viewport.

max-width: It set the maximum width of the viewport.

width: It is used to set the width of the viewport.

min-height: It set the minimum height of the viewport.

max-height: It set the maximum height of the viewport.

height: It set the height of the viewport.

zoom: It set the initial zooming factor.

min-zoom: It set the minimum zooming.

max-zoom: It set the maximum zooming.

user-zoom: Controls whether or not the user should be able to change the zoom factor.

orientation: Controls the document's orientation.

viewport-fit: Controls the display of the document on non-rectangular displays.

Syntax:
@viewport{
 <property>
}

Example
@viewport {
    width: device-width;
    initial-scale: 1;
    zoom: 1;
    min-zoom: 1;
    max-zoom: 3;
    user-zoom: fixed;
}

Feature Chrome Firefox IE Opera Safari Android Chrome iOS Chrome
Basic support 29+ No 10+ 16+ No Yes Yes
Copyright Labw3