Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to set portrait and landscape media queries in css

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 172
    Comment on it

    If you want to set your view for a specific device, you need to use media query css to get that.

    To set css for landscape and portrait view, you need to add the following lines into your css file.

    @media only screen and (orientation: landscape) {
        // css for landscape view
    }
    @media only screen and (orientation: portrait) {
       // css for portrait view
    }

    When the width of the browser window is greater than its height, it is called landscape view and when the height of the browser window is greater than its width, it is called portrait view.

    following is the example that shows how to use media queries for different orientation:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
    body {
        background-color:lightgreen;
    }
    
    @media only screen and (max-device-width: 640px) and (orientation: portrait) {
        body {
            background-color:lightblue;
        }
    }
    
    /* Small screen */
    @media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
        body { background: blue;}
    }
    
    /* iPhone landscape and iPad portrait */
    @media only screen and (max-device-width: 480px) and (orientation: landscape){
        body { background: red;}
    }
    </style>
    </head>
    <body>
    <p>Resize the Window to check in portrait and landscape mode.</p>
    </body>
    </html>

    That is how you can set the styles for different views according to the height and width of the device and for landscape or portrait orientation.

 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: