Windows Phone 8和设备宽度

最新推荐文章于 2024-10-06 20:16:20 发布

cunya6061

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量121

点赞数

文章标签： java python 人工智能 android linux

原文链接：https://timkadlec.com/2013/01/windows-phone-8-and-device-width/

版权

When I wrote about IE10 and the new snap mode back in October I advised using width: device-width to fix responsive design in snap mode instead of Microsoft’s recommendation, which was to use width: 320px. Using device-width is a far more future friendly approach and testing I had done on a tablet running Windows 8 showed this worked just as well.

十月份，当我写有关IE10和新快照模式的文章时，我建议使用width: device-width在快照模式下修复响应式设计，而不是Microsoft的建议，即使用width: 320px 。使用device-width是一种未来更友好的方法，我在运行Windows 8的平板电脑上进行的测试表明，这种方法同样有效。

However, the other week Matt Stow discovered that device-width wasn’t getting the job done on a Lumia 920. Apparently the Lumia 920 (which boasts a 4.5” screen) reports a viewport width of 768px for device-width, which is much larger than what you would expect for a device its size.

然而，前一周，马特·斯托(Matt Stow)发现，在Lumia 920上，设备宽度无法完成工作。显然，Lumia 920(具有4.5英寸的屏幕)报告的device-width的视口宽度为768px，这比您预期的设备尺寸要大得多。

Tomomi Imura, who has done a lot of testing around viewports, apparently discovered this behavior awhile back:

围绕视口进行了大量测试的Imura富美(Tomomi Imura)很早就发现了这种现象：

So it is correct <meta name=viewport content=width=device-width> gives 320px width, while @-ms-viewport {width:device-width} 768 on Lumia 920” (Source)

因此，正确的<meta name = viewport content = width = device-width>给出了320px的宽度，而@ -ms-viewport {width：device-width} 768在Lumia 920上( 来源 )

Here’s where things get interesting. When you use device-width inside the meta tag on Windows Phone 8, it returns CSS pixels. When you set width=device-width through CSS device adaptation, it returns the actual device pixels. (If that sounds a bit murky, PPK’s excellent articles on viewports should help clear it up: part one and part two)

这是有趣的地方。当您在Windows Phone 8的meta标记内使用device-width ，它将返回CSS像素。通过CSS设备适配设置width=device-width ，它将返回实际设备像素。 (如果听起来有些晦暗，那么PPK在视口上的出色文章应该有助于清除它：第一部分和第二部分 )

This is an issue because using CSS device adaptation is necessary for getting responsive sites to work in snap mode in IE10 for Metro. So while CSS device adaptation fixes our issues with snap mode, it causes issues on Windows Phone 8 devices like the Lumia.

这是一个问题，因为必须使用CSS设备适配才能使响应站点在IE10 for Metro中以快照模式工作。因此，尽管CSS设备适应解决了快照模式下的问题，但会导致Windows Phone 8设备(如Lumia)出现问题。

After talking to Rey Bango at Microsoft (who is awesome to work with and did not pay me (much) to say that) this behavior was confirmed as a bug—not intentional behavior and the team over there is going to get an update out (not sure when) to fix it. The good news is that this fix will also clear up another issue in IE10 that causes it to always report a screen resolution of 96dpi, regardless of if that is true or not.

在与Microsoft的Rey Bango交谈之后(他非常敬业并且没有付我很多钱)，这种行为被确认为错误-不是故意的行为，那里的团队将进行更新( (不确定何时)修复它。好消息是，此修复程序还将清除IE10中的另一个问题，该问题导致该问题始终报告96dpi的屏幕分辨率，而不管该设置是否正确。

The bad news is that getting those updates to people using Windows 8 phones won’t be an overnight thing. Just ask anyone with an Android device about how quickly carriers release updates. Once they’ve finished crying they’ll fill you in.

坏消息是，使用Windows 8手机向人们提供这些更新不会一overnight而就。只需向拥有Android设备的任何人询问运营商发布更新的速度如何。一旦他们哭了，他们就会填补你。

In the meantime, we’re in a bit of a jam. We have a few options, none of which are ideal:

同时，我们陷入了困境。我们有几种选择，都不是理想选择：

We could do what Matt (and Microsoft) initially suggested and apply the following code:

我们可以执行Matt(和Microsoft)最初建议的操作，并应用以下代码：

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

This would address the snap mode issue, as well as make Windows Phone 8 devices like the Lumia 920 display nicely. Unfortunately this would also impact future devices that may not actually need (nor should they get) this “fix”. Since each Windows 8 device will support the same syntax, the “fix” would be applied to any phone running Windows 8.

这将解决快照模式问题，并使Windows Phone 8设备(如Lumia 920)很好地显示。不幸的是，这也将影响将来可能实际上不需要(也不应该获得)此“修复程序”的设备。由于每个Windows 8设备将支持相同的语法，因此“修复”将应用于运行Windows 8的任何电话。

We could also leave the @-ms-viewport stuff out entirely. This would mean that phones, tablets and desktops would all behave as you would expect unless the person was using the browser in snap mode. I haven’t seen any stats about this behavior yet, so I really can’t speak to how large an audience that is.

我们也可以完全省略@ -ms-viewport的内容。这意味着手机，平板电脑和台式机的行为都将与您期望的一样，除非用户以快照模式使用浏览器。我尚未看到有关此行为的任何统计信息，因此我真的无法说出有这么多的受众。

Finally could use width=device-width, which is certainly the most “future friendly” approach. To address the issue on Windows Phone 8, we could apply the temporary fix that the folks at Microsoft has come up with. Their recommendation is to set the meta viewport tag to device-width as you normally would, and set the viewport in your CSS like so:

最后可以使用width=device-width ，这当然是最“未来友好”的方法。为了解决Windows Phone 8上的问题，我们可以应用Microsoft员工提供的临时修复程序。他们的建议是像往常一样将meta视口标签设置为device-width，然后像这样在CSS中设置视口：

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

Then, you would need to add the following JavaScript.

然后，您需要添加以下JavaScript。

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
            "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].
        appendChild(msViewportStyle);
}

The code above checks for the version of IE that has this issue (IE Mobile 10) and then injects a stylesheet that overrides the device-width declaration in your CSS. This gets all Windows 8 devices playing along nicely. Windows Phone 8 devices will pay apply a friendlier viewport, and snap mode users will see a site scaled to their viewport size as well.

上面的代码检查存在此问题的IE版本(IE Mobile 10)，然后注入样式表，该样式表将覆盖CSS中的设备宽度声明。这样可以使所有Windows 8设备正常运行。 Windows Phone 8设备将支付适用于更友好的视口的费用，并且快照模式用户也将看到一个按其视口大小缩放的网站。

My recommendation is to use Microsoft’s fix. Client-side UA sniffing may not be the most eloquent solution, but I prefer it to potentially harming the user experience—something which each of the other two solutions would be guilty of. Perhaps this would be a different scenario if this was IE8 or IE7, but considering it’s the behavior in an operating system that just came out (and therefore, most likely will only increase in marketshare for the time being) I think it’s worth implementing.

我的建议是使用Microsoft的修复程序。客户端UA嗅探可能不是最雄辩的解决方案，但我更喜欢它潜在地损害用户体验-其他两个解决方案中的每一个都应对此感到内。如果是IE8或IE7，也许情况会有所不同，但是考虑到这只是操作系统中出现的行为(因此，目前市场份额很可能只会增加)，我认为值得实施。