Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • The Viewport - Responsive Web Design

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.20k
    Comment on it

    Viewport meta tag is the primary idea of Responsive Web Design. The viewport differs from device to device. It will be smaller on a mobile when contrasted with PC screen.

    To set the viewport, HTML5 presented a technique  <meta> tag, to permit developers to take control over the viewport.

    It is compulsory to include <meta> viewport element in all your web pages.

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

    A <meta> viewport element control the page's  measurements and scaling.

    The width=device-width part sets the width of the page to follow the screen-width of the device (this will vary depending on the device).

    The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.


    CSS viewport rule :- 

    1. Try not to utilize fixed width elements.

    2. Substance ought not depend on a specific viewport width to render well. 

    3. Utilize CSS media queries to apply diverse styling for small and large screens


    Following is the list of viewport properties :-





    The width of the virtual viewport of the device.


    The physical width of the device's screen.


    The height of the "virtual viewport" of the device.


    The physical height of the device's screen.


    The initial zoom when visiting the page. 1.0 does not zoom.


    The minimum amount the visitor can zoom on the page. 1.0 does not zoom.


    The maximum amount the visitor can zoom on the page. 1.0 does not zoom.


    Allows the device to zoom in and out. Values are yes or no.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: