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响应头中。是否可以对视口标记执行相同的操作？

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>

CSS中的@viewport标签不适用于iOS

1 个答案: