将响应式设计适配到 Windows RT 分屏视图

4.50/5 (2投票s)

2012年12月7日

2分钟阅读

14972

如何将您的响应式 HTML 页面适配到 Windows RT 分屏模式。

引言

现代世界拥有大量不同尺寸的设备。忽略这一事实是不明智的。所有优秀的网站都应该根据当前设备的屏幕调整其布局。为了解决这个问题，您可以使用响应式布局方法。响应式布局允许您根据当前的屏幕分辨率和尺寸调整您的标记。

坏消息是，Windows RT 上的 IE 忽略了响应式布局的标准媒体查询。实际上，当网站被分屏时，IE 不会切换到压缩视图。

本文将帮助您解决这个问题。

响应式布局的主要思想是使用流体块，并为不同的分辨率切换 CSS 样式。为了在不同的屏幕分辨率下切换 CSS 样式，我们可以使用 CSS 媒体查询。

CSS 媒体查询使用 body 元素宽度进行工作。因此，我们可以定义在选择器中指定 body 元素宽度时将应用的样式。

@media only screen and (max-width : 600px)
{
}

定义所有必要的选择器后，我们可以以响应式的方式设置页面样式。

为了允许移动设备使用媒体查询，我们应该添加一个 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

页面现在将适应每个屏幕。

问题在于 Windows RT 上 Internet Explorer 中的页面布局。如果我们尝试在 IE 中打开此页面并分屏显示，我们会看到类似这样的情况

这意味着 IE 在分屏模式下忽略了 viewport 标签。页面呈现的方式就像它在大型屏幕上一样。分屏模式在 Windows RT 中非常有用，因此我们不能忽略它。像原生 Windows RT 应用程序一样，在分屏模式下更改页面布局会很方便。

为了做到这一点，我们可以使用一些小技巧 - 我们需要在 CSS 媒体查询中使用特殊的 Microsoft 选择器显式定义 body 宽度

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

在这种情况下，Windows RT 上的 IE 将调整页面宽度以适应屏幕，我们将看到真实的页面布局

分屏窗口是 Windows RT 中的一个重要功能。有了分屏窗口，我们可以更方便地并行执行一些任务。有一个小技巧可以将我们的页面适配到分屏模式。让我们这样做吧！