What is @-webkit-viewport?

I came across this webkit CSS selector @-webkit-viewport today and trying to understand what it does ? There does not seem to be any documentation on this. I tried

@-webkit-viewport {
    max-height: 100px;
    min-height: 100px;
}

and

@media all {
    @-webkit-viewport {
        max-height: 100px;
        min-height: 100px;
    }
}

but both are not working. Can someone please explain what @-webkit-viewport does and an example of using it.

Answers


You can define meta name as viewport and then you can use it for different mobile browsers like this:

Include it in your <head />:

<meta name="viewport" content="width=320, initial-scale=0.5">

Css:

@-o-viewport { /*for opera browser*/
    width: 300px;
    zoom: 1;
}
@-webkit-viewport { /*for webkit browser*/
    width: 320px;
    zoom: 0.5;
}
@-ms-viewport { /*for internet explorer*/
    width: 320px;
    zoom: 0.5;
}

Currently firefox and safari doesn't support this.

You may also see mozilla docs.

Here's a nice blog about this.


Need Your Help

How to evade non-called fixture in Pytest?

python pytest

Pytest suite has a brilliant feature of fixtures.

C4047 - Levels of Indirection - Struct initialization

c arrays pointers struct indirection

I am actually working with some old software of my company and I try to figure out how to make stuff works properly.