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.19k
    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 :-

     

    Property

    Description

    width

    The width of the virtual viewport of the device.

    device-width

    The physical width of the device's screen.

    height

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

    device-height

    The physical height of the device's screen.

    initial-scale

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

    minimum-scale

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

    maximum-scale

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

    user-scalable

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: