Question

我的网站流量设计介于800px和1280px之间。（我很欣赏很多显示分辨率超过此值。）

在10英寸平板电脑中，网站显示最佳，视口宽度设置为800px，允许平板电脑将其缩放到其窗口大小。这样，字体尺寸合适，图像显示效果不会受到模糊影响。

桌面浏览器忽略视口元标记，并在800px和1280px之间显示，以及超出此范围的背景。

然而，Windows 8上的IE10在桌面和平板电脑上实现了视口标记，因此在桌面上实现了800px布局。这会在较大的显示器上产生难以接受的模糊图像和巨大文本。

使用CSS我能找到的最好的方法就是这样（假设Windows Surface的宽度为1366px）：

@media screen and (max-width: 1023px) {
    @-ms-viewport { width: 800px; }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
    @-ms-viewport { width: 1024px; }
}

@media screen and (min-width: 1367px) {
    @-ms-viewport { width: device-width; }
}

这仍然意味着桌面将放大图像和文本，除非显示器的分辨率超过1366px。鉴于Surface具有与许多桌面类似的原始分辨率，在媒体查询中使用max-device-width似乎没有提供太多。

或者，我可以检测平板电脑并使用Javascript设置视口宽度或使用PHP检测它并提供不同的样式表。

毫无疑问，有一种更好的方法可以做到这一点，最好是使用CSS吗？

谢谢，感谢任何建议。

IE10中针对台式机与平板电脑的不同视口

0 个答案: