0

我的网站有 800 像素到 1280 像素之间的流畅设计。（我很欣赏现在许多显示分辨率都超过了这个值）。

在 10 英寸平板电脑中，站点显示最佳，视口宽度设置为 800 像素，允许平板电脑将其缩放到其窗口大小。这样字体大小合适，并且由于显示器较小，图像不会受到模糊的影响。

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

然而，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; }
}

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

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

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

谢谢，感谢任何建议。

4

0 回答 0