ie11 不支持响应式设计_IE10捕捉模式和快速响应设计

ie11 不支持响应式设计

Maximiliano Firtman has done an excellent job providing an overview of what to expect from IE10 in Windows 8, but I wanted to dig just a little deeper on one feature in particular.

Maximiliano Firtman做了出色的工作，概述了Windows 8中IE10的功能 ，但是我想特别深入地探讨一个功能。

In Windows 8, there are two “modes” of use: Metro mode and classic mode. Metro mode sports the spiffy new UI while classic is the same old boring Windows of yore. When you run Internet Explorer 10 in Metro mode (the default) there’s a cool new feature that lets you “snap” a window to the side so you can use two simultaneously. This window, of course, is made to be far more narrow.

在Windows 8中，有两种“使用模式”：都市模式和经典模式。 都市模式具有精美的新用户界面，而经典版则与以前的旧无聊Windows相同。 当您在Metro模式(默认)下运行Internet Explorer 10时，有一个很酷的新功能，可让您“将”窗口“捕捉”到侧面，以便您可以同时使用两个窗口。 当然，该窗口要窄得多。

Here’s the wrinkle: when snapped, IE10 ignores the meta viewport tag for any viewport smaller than 400 pixels in width (which it is, when in snap mode). This in turn messes up your beautifully set responsive plans and results in the same kind of smart scaling you see on non-optimized sites on an iPhone or Android device.

这就是皱纹：当捕捉时，IE10会忽略宽度小于400像素(在捕捉模式下)的任何视口的meta视口标签。 反过来，这会扰乱您精美设置的响应计划，并产生与在iPhone或Android设备上未优化的网站上看到的相同的智能扩展。

To get IE10 in snap mode to play nicely you have to use CSS Device Adaptation. For the unfamilar, CSS Device Adaptation allows you to move your viewport declarations (such as width, zoom, orientation, etc) into your CSS, using a rule like so:

要使IE10在快照模式下正常播放，您必须使用CSS Device Adaptation 。 对于不熟悉的用户，CSS Device Adaptation允许您使用如下规则将视口声明(例如宽度，缩放，方向等)移动到CSS中：

@viewport{
    [viewport property];
}

IE10 supports the @viewport rule with a -ms prefix. So the viewport rule ends up looking like:

IE10支持带有-ms前缀的@viewport规则。 因此，视口规则最终看起来像：

@-ms-viewport{
    [viewport property];
}

What Microsoft recommends is adding the rule:

Microsoft建议添加规则：

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

The rule above would ensure that for any viewport under 400px wide, IE would set the width to 320px and scale from there. I’m not crazy about the introduction of pixels into an otherwise fluid layout (see Lyza’s post on em-based media queries for a little bit about why). Instead I recommend:

上面的规则将确保对于宽度小于400像素的任何视口，IE会将宽度设置为320像素并从此处缩放。 我不为将像素引入到其他易变的布局中而疯狂(有关原因，请参见Lyza在基于em的媒体查询上的帖子 )。 相反，我建议：

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

Seeing that this worked, I had three main questions.

看到这行得通，我有三个主要问题。

1.为什么设备宽度有效？ (1. Why does device-width work?)

While the specification states that device-width should return the width of the “rendering surface” of the device, Windows 8 doesn’t seem to adhere to that when in snap mode. Unless they are claiming that in snap mode the “rendering surface” is just the snapped portion of the screen.

尽管规范指出device-width应该返回设备“渲染表面”的宽度，但是 Windows 8在快照模式下似乎并没有遵循该宽度 。 除非他们声称在捕捉模式下，“渲染表面”只是屏幕的捕捉部分。

2.其他浏览器呢？ (2. What about other browsers?)

Early versions of Chrome and Firefox are both available for Metro and using the typical meta viewport element is enough to ensure layouts adjust while in snap mode.

早期版本的Chrome和Firefox均可用于Metro，使用典型的meta视口元素足以确保在快照模式下调整布局。

3. Microsoft为什么选择忽略视口标签？ (3. Why did Microsoft choose to ignore the viewport tag?)

My initial reaction was to reach for the torches and pitchforks. Though they have been doing some awesome work lately, IE does have a history of questionable moves. However, after chatting with the awesome Nishant Kothary over at Microsoft (seriously—Nishant is a great example of how to do developer relations), I have to soften my stance at least slightly.

我最初的React是伸手拿起火把和干草叉。 尽管他们最近一直在做一些很棒的工作，但是IE确实有一个可疑的举动历史。 但是，在与Microsoft令人敬畏的Nishant Kothary聊天之后(严重的是-Nishant是如何建立开发人员关系的一个很好的例子)，我必须至少稍微放松一下立场。

The meta viewport element is non-normative, that is, it isn’t actually a standard. It was first implemented by Apple for the iPhone and quickly adopted by other platforms.

meta视口元素是非标准元素，也就是说，它实际上不是标准的元素。 它最初由Apple为iPhone实施，并很快被其他平台采用。

The @viewport rule, however, is in the process of being standardized by the W3C. In fact, the only time the viewport element is mentioned is to explain how to translate it into the @viewport rule. So in this way, you could make the case that the team over at Microsoft is banking on the future.

但是， @viewport规则正在由W3C进行标准化。 实际上，唯一提及viewport元素的目的是解释如何将其转换为@viewport规则。 因此，通过这种方式，您可以证明Microsoft的团队正在依靠未来。

The other thing to keep in mind is that you can build native Metro apps using HTML, CSS and JS. This means that the approach Microsoft chooses for handling device-adaptation in IE10 is the same approach they have to use for Metro apps.

要记住的另一件事是，您可以使用HTML，CSS和JS构建本机Metro应用程序。 这意味着Microsoft在IE10中选择的用于处理设备适配的方法与他们在Metro应用程序中必须使用的方法相同。

I’m with them in thinking that @viewport is the more elegant solution and I also admire their decisions to try and adhere to standards. That being said, it’s a gutsy move and I do worry that it was premature. By going this route, they’ve ensured that the ever-increasing number of sites that make use of the meta viewport element will not display as intended in the narrower viewport. And considering that support for CSS Device Adaptation is currently limited to Opera and IE10, developers aren’t going to switch their approach anytime soon.

我与他们一起认为@viewport是更优雅的解决方案，我也很欣赏他们尝试遵循标准的决定。 话虽如此，这是一个胆大妄为的举动，我确实担心这还为时过早。 通过这条路线，他们确保了使用meta视口元素的越来越多的网站在狭窄的视口中不会按预期显示。 考虑到目前对CSS Device Adaptation的支持仅限于Opera和IE10，开发人员不会很快改变他们的方法。

On the surface it seems to me that it would have made more sense to introduce support for @-ms-viewport while maintaining support for the meta viewport element across all modes. They still could have pushed @-ms-viewport as the best way to build for Metro apps (in particular) and IE10, but it would have ensured that existing sites weren’t breaking in their browser.

从表面上看，在所有模式下保持对meta viewport元素的支持时，引入对@-ms-viewport支持似乎更有意义。 他们仍然可以将@-ms-viewport视为构建Metro应用程序(尤其是IE10)和IE10的最佳方法，但它可以确保现有站点不会在其浏览器中损坏。

That being said, the standard disclaimer that it’s easy to judge from the outside is in full effect. I know that the IE team felt that this move was the responsible one to make, and the best scenario for the web. I also know that they undoubtedly have a lot more data on how well the two methods work than I do. It’s entirely possible that my suggested way of handling this would’ve caused issues at some point.

话虽如此，从外部容易判断的标准免责声明已完全生效。 我知道IE团队认为此举是负责任的举动，也是网络上的最佳方案。 我也知道，毫无疑问，关于这两种方法的工作情况，他们比我拥有更多的数据。 我建议的处理方法完全有可能在某些时候引起问题。

Regardless, the takeaway for today is that you need to start adding the @-ms-viewport rule to your CSS now to ensure your sites look as you would expect on Windows 8.

无论如何，今天的收获是，您需要立即开始在CSS中添加@ -ms-viewport规则，以确保您的站点在Windows 8上具有预期的外观。

翻译自: https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

ie11 不支持响应式设计