修复 Windows Phone 8 上的 IE 10 视口

(function() {
  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);
  }
})();

简要背景

为了让 IE 10（桌面版）在其新的“贴靠模式”下工作，您需要使用以下内容

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

但这会搞砸一些 Windows Phone 8 手机，覆盖元视口标签，并在小屏幕上呈现得过大。所以目前的解决办法是使用这个棘手的设备检测/注入脚本。

更详细的背景

Matt Stow: IE 10 上的 Windows Phone 8 响应式设计
Tim Kadlec: Windows Phone 8 和设备宽度

Darin

# 2014 年 1 月 13 日

我们使用它，但它会弄乱 Zendesk 弹出窗口，因为脚本在加载时发生，而 Zendesk 弹出窗口的宽度是正常宽度的两倍多。

Ben

# 2014 年 2 月 22 日

我正在尝试为 Windows Phone 8 制作一个需要全屏分辨率的网络应用程序

似乎没有办法发现这一点

使用

这始终为 320

使用 javascript screen.width 返回 320

使用 javascript screen.availWidth 返回 320

我整理了一些目前似乎有效的代码

JavaScript

window.devicePixelRatio = window.devicePixelRatio || screen.deviceXDPI / screen.logicalXDPI;
var actualWidth = screen.width * window.devicePixelRatio;
actualWidth = actualWidth - (actualWidth % 2);
var actualHeight = screen.height * window.devicePixelRatio;
actualHeight = actualHeight - (actualHeight % 2);

// TEMP FIX!
if(actualHeight == 1282){
    actualHeight = 1280;
}

$(window).bind('resize', function() {
    if(window.innerHeight > window.innerWidth){
        // portrait
        width = actualWidth;
        height = window.innerHeight;
    }else{
        // landscape
        width = actualHeight;
        height = window.innerHeight;
    }

    $('html').css('width', width);
    $('body').css('width', width);
}).trigger('resize');

CSS

@media screen and (orientation:portrait) {
    @-ms-viewport { width: 720px; }
}
@media screen and (orientation:landscape) {
    @-ms-viewport { width: 1280px; }
}

非常感谢您的任何帮助/建议，谢谢！

Max Scheffler

# 2014 年 3 月 13 日

http://jsperf.com/bytagname-vs-head

Grucom

# 2014 年 5 月 17 日

来自此网站天才的解决方案：https://www.campaignmonitor.com/forums/topic/7989/windows-phone-8-has-full-css3media-query-support/

他一个人解决了问题！\o/

我太高兴找到这个解决方案了，所以我在网上到处发布它，你们给了我创建响应式 HTML 的提示。另外，还要感谢你们的帖子。

Hannes

# 2014 年 6 月 6 日

我从任何帖子中都没有读到，如果代码应该在头部的 script 标签内？或者它可以放在任何 .js 文件中？如果是这样，那么应该放在头部还是在 body 标签之后？

Hannes

# 2014 年 6 月 6 日

在第一句话中，我想说“… 应该在头部的 script 标签内？”

Albin

# 2014 年 6 月 6 日

此错误已在 Windows Phone 8 更新 3 中修复。

请参阅：Introducing Windows Phone Preview for Developers

Stanislav

# 2015 年 1 月 8 日

您好！
在 !important 之前需要空格吗？

“@-ms-viewport{auto !important}”
而不是
“@-ms-viewport{auto!important}”

否则代码将无法工作！

Stanislav

评论永久链接# 2015 年 1 月 8 日

哦，抱歉。
这是一个错误的假设！

但我必须说点别的。
在我的情况下。
在我添加以下标签之前，这段代码不起作用

谢谢！

Stanislav

# 2015 年 1 月 8 日

抱歉，代码没有显示 - 我的意思是这个

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Brian Funt

# 2015 年 1 月 23 日

您不能直接这样做吗？

@-ms-viewport {
  width: 100%;
}

mani

# 2015 年 2 月 6 日

我已经包含了代码，但它仍然没有达到目的。它创建了一个样式节点，其内部内容为 -ms-viewport。

在 DOM 中，它创建为

@-ms-viewport{width:auto !important}

我包含的代码紧接在 head 标签之后。

an van

# 2015 年 11 月 15 日

我发现 Microsoft Edge 存在一个新问题。
请访问以下链接。
https://jsfiddle.net/vxba/pm4zvspn/4/

并帮助我解决这个问题。
非常感谢！

an van

评论永久链接# 2015 年 11 月 15 日

对不起，我发布的内容有遗漏。
首先添加一行带“添加”按钮。
您可以点击删除按钮的绿色区域，然后点击另一个按钮，您就能看到我的问题。

SammieFox

# 2016 年 5 月 9 日

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
（向下滚动并阅读最后两条条目）

Arthur Stolyar

# 2016 年 12 月 23 日

可能现在太晚了，但这样会更容易

@media screen and (-ms-view-state: snapped) {
@-ms-viewport { width: device-width }
}

简要背景

更详细的背景

评论

发表评论 取消回复

发表评论取消回复