Question

当我使用Active-X或.NET WebBrowser控件（Active-X周围的薄包装器）控件将WebBrowser控件嵌入到窗口中时，它似乎不尊重 @media css属性，例如 max-width 。给定{fiddle}：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- necessary for tablets -->
    <style>
    #redBox  {
        background-color: red;
    }

    #blueBox {
        background-color: blue;
    }

    @media (max-width: 1000px) {
        #redBox {
            display: none;
            height: 0px;
        }
    }
    </style>
</head>
<body>
    <div id="redBox">  Red Box  </div>
    <div id="blueBox"> Blue Box </div>
</body>
</html>

当您使窗口小于1000px时，红色框应消失。

适用于Chrome，Firefox和IE。但是，当我使用.NET WebBrowser控件在WebBrowser控件中加载页面，或使用Shell.Explorer Active-X控件加载非托管应用程序时，更改不起作用。如果我使用file:///属性或http加载它并不重要。

知道如何让它发挥作用吗？

Answer 1

尝试添加： <meta http-equiv="X-UA-Compatible" content="IE=9"> 在html。

确保您拥有IE9或更高版本。 WebBrowser控件具有在本地PC上设置的所有功能。

Answer 2

我有类似的问题...

我能想到的唯一解决方案是JavaScript解决方法，根据屏幕宽度通过JS设置所需的CSS属性，例如screen.availWidth等。

嵌入式WebBrowser控件不尊重@media max-width属性

2 个答案: