What is @ -webkit-viewport?
I came across this webkit CSS @ -webkit-viewport selector today and tried to figure out what it does? Apparently there is no documentation on this matter. I tried
@-webkit-viewport {
max-height: 100px;
min-height: 100px;
}
and
@media all {
@-webkit-viewport {
max-height: 100px;
min-height: 100px;
}
}
but both of them don't work. Can someone explain what @ -webkit-viewport does and an example of its use.
+3
source to share
1 answer
You can define the meta name as the viewport and then you can use it for different mobile browsers, for example:
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;
}
Firefox and safari do not currently support this.
You can also view mozilla docs .
Here's a nice blog about it.
+5
source to share