html - CSS 中的@viewport 标签在 iOS 上不起作用

Question

由于各种原因，我无法为我正在处理的元素修改任何 HTML。所以我不能设置这个属性:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

我试过将其放入我的 CSS 中:

@viewport {
    width: device-width;
    zoom: 1;
}

但是好像不行。在 iPhone 上测试它仍然呈现错误的断点。我认为这个功能还没有进入浏览器吗？

如果在 CSS 中做不到，我可以在服务器端 header 中设置它吗？例如对于 IE，我将 X-UA-Compatible:IE=Edge,chrome=1 放在 Apache 响应 header 中。是否可以对视口(viewport)标签执行相同的操作？

Answer 1

可能您需要供应商前缀:

@-wekbit-viewport {
    width: device-width;
    zoom: 1;
}
@-ms-viewport {
    width: device-width;
    zoom: 1;
}
@-o-viewport {
    width: device-width;
    zoom: 1;
}
@viewport {
    width: device-width;
    zoom: 1;
}

注意:目前firefox和safari不支持@viewport css。

参见 MDN Docs了解更多信息。

Using server side technology,

您可以像这样将它添加到您的 .htaccess 文件中:

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>