Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Responsive web design is working on mobile device and Ipad

    • 0
    • 2
    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 162
    Comment on it

    The Viewport Meta Tag

    <meta name="viewport" content="">
    

    Within the content=" " you can enter a load of comma delimited values, but were going to to focus on the fundamental ones for now.

    For example, if your mobile design is purposely laid out at 480px you can specify the viewport width:

    <meta name="viewport" content="width=480">
    

    For flexible layouts its more practical to base your viewport width on the device in question, so to match your layout width to the device width youd enter:

    <meta name="viewport" content="width=device-width">
    

    To be extra certain that your layout will be displayed as you intended it you can also set the zoom level. This, for example

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

    will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied. You could even go further and prevent any zooming by the user:

      <meta name="viewport" content="maximum-scale=1">
    

 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: