1

When I embed the WebBrowser control in a window using either Active-X or the .NET WebBrowser control (thin wrapper around the Active-X) control, it doesn't seem to respect @media css attributes such as max-width. Given {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>

The red box should disappear when you make the window smaller than 1000px.

This works in Chrome, Firefox and IE. However, when I load the page in a WebBrowser control using the .NET WebBrowser control, or a unmanaged application using the Shell.Explorer Active-X control, the change doesn't work. It doesn't matter if I load it using a file:/// attribute or with http.

Any idea how to make it work?

4

2 回答 2

3

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

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

于 2014-01-31T13:15:25.440 回答
0

我有一个类似的问题...

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

于 2013-11-04T09:48:04.207 回答