android 4.4 - webview 不接受 css 宽度 100%答案

【问题标题】：android 4.4 - webview don't accept css width 100%android 4.4 - webview 不接受 css 宽度 100%
【发布时间】：2014-11-17 17:31:25
【问题描述】：

我对 android 4.4+ 的 webview 的新实现有疑问。

我的 HTML 代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
    <style type="text/css" media="all">
        #player-wrapper, #image-wrapper {
            width: 100% !important;
            height: 100% !important;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        #image-wrapper {
            z-index: 999;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="player-wrapper"></div>
    <img id="image-wrapper">

    <script type="text/javascript">
        var element = document.getElementById('player-wrapper');
        var image = document.getElementById('image-wrapper');

        var player = new WM.Player({
                        autoPlay: true,
                        width: 640,
                        height: 360
                    });

        player.attachTo(element);

        image.onclick = function() {
            player.playVideo();
            image.style.visibility = 'hidden';
        };
    </script>
</body>

但是规则宽度：100% 不起作用，# player-wrapper 变得比 webview 更大。奇怪的是只有#player受到影响，#image是对的。

谁能帮我解决这个问题？

【问题讨论】：

标签： android css webview

【解决方案1】：

问题在于 WM.player 构造函数，它将播放器的宽度设置为 640 像素，这可能比您的视口大。 WM.Player 构造函数中没有 max-width 参数，因此您必须使用元标记。尝试在 HTML 的 head 部分添加 <meta name="viewport" content="width=640px">，以便调整视口的大小以适应 WM.Player 构造函数中设置的 640px 宽度。

【讨论】：

相同的 HTML 在 android 4.3 中工作正常，我尝试设置视口但也不起作用
发现了这个不错的 sn-p 可能对 document.body.style.zoom = 1 / window.devicePixelRatio987654322@ 有帮助
它不能 100% 工作，因为缩放不适合 web 视图，但这是一个好的开始。问题是：如何在 webview 的新实现中将元素的宽度和高度设置为 100%？