Question

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

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

现在我遇到了问题，Windows表面上的IE10忽略了元标记，所以我尝试通过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的缩放范围？或者有人看到我正在犯的错误吗？

Answer 1

我们在使用以下标签解决的表面平板电脑上测试新的reponsive网站时遇到了类似的问题

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

但是我们的初始和最大比例设置为1，我们不会尝试改变它们。

查看@ ms-viewport {/ 3}}的MSDN文档，它似乎不支持使用视口规则设置缩放和缩放，因此您可能无法更改此设置。

根据文档，这些只能在标准的@viewport规则http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx上设置，不知道哪些浏览器支持它们。

Answer 2

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

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

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

诀窍是overflow-x:hidden; ......一旦我将它放在Surface11上的IE11（地铁和桌面）上，我就可以滚动屏幕房地产了！：）

我希望有所帮助。

通过CSS为Windows Surface RT设置视口

2 个答案: