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中不可能做到这一点，我可以在服务器端标头中设置吗?例如，对于IE，我将X-UA-Compatible:IE=Edge,chrome=1放在Apache响应头中。有可能对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文档获取更多信息。

使用服务器端技术，

你可以像这样把它添加到你的.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>