@-webkit-viewport 是什么？

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 是什么？

What is @-webkit-viewport?

html

css

webkit