3

我正在为移动设备制作网站，尤其是平板电脑。要设置视口，我使用元标记来控制缩放范围：

<meta name="viewport" content="width=device-width, maximum-scale=1.8, minimum-scale=0.63"/>

现在我面临的问题是，Windows Surface 上的 IE10 忽略了 Meta Tag，所以我尝试通过 CSS 规则设置视口。不幸的是，我尝试过的代码不起作用：

@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}

这是来自我的 CSS 文件。我是媒体查询的新手，所以我不知道代码是否正确，或者我只是在语法或其他方面犯了一些错误。我也试过：

@media all{
@-ms-viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}
@viewport{
    minimum-scale: 0.63;
    maximum-scale: 1.8;
    min-zoom: 0.63;
    max-zoom: 1.8;
}}

也不行。那么有没有人控制 Surface 的缩放范围的解决方案？或者有人看到我犯的错误吗？

4

2 回答 2

3

在我们使用以下标签解决的 Surface 平板电脑上测试我们的新响应站点时，我们遇到了类似的问题

@-ms-viewport { width: device-width; }

然而，我们的初始和最大比例设置为 1，我们并没有试图改变它们。

在此处查看 @ms-viewport 的 MSDN 文档http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx它似乎不支持该设置使用视口规则进行缩放和缩放，因此您可能无法更改此设置。

根据文档，这些只能在标准@viewport 规则http://www.w3.org/TR/css-device-adapt/#the-viewport-rule上设置，目前还不知道哪些浏览器支持它们。

于 2013-03-05T13:36:00.070 回答
0

是的，这也让我难住了！我无法滚动我的“即将推出”页面超出 Surface RT 的屏幕空间。我尝试了"@-ms-viewport"没有太多运气，所以我进入了实验模式并找到了解决问题的方法！

我的CSS中有以下内容......

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

诀窍是overflow-x:hidden;……只要我把它放在 Surface RT 上的 IE11（地铁和桌面）中，我就可以滚动到屏幕之外！:)

我希望这会有所帮助。

于 2013-10-24T13:31:23.400 回答