Question

我今天遇到了这个webkit CSS选择器@ -webkit-viewport并试图了解它的作用？似乎没有任何关于此的文件。我试过了

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

和

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

但两者都不起作用。有人可以解释一下@ -webkit-viewport的作用以及使用它的一个例子。

Answer 1

您可以将元名称定义为视口，然后您可以将其用于不同的移动浏览器，如下所示：

将其包含在<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和safari不支持此功能。

您也可以see mozilla docs。

这是一个很好的blog。

Answer 2

它使您可以根据浏览器代理来编辑内容区域的样式，并且该样式应位于头部。

    <style type="text/stylesheet">
        @-webkit-viewport   { width: device-width; }
        @-moz-viewport      { width: device-width; }
        @-ms-viewport       { width: device-width; }
        @-o-viewport        { width: device-width; }
        @viewport           { width: device-width; }
    </style>

什么是@ -webkit-viewport？

2 个答案: