Question

我对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是对的。

任何人都可以帮我吗？

Answer 1

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

android 4.4 - webview不接受css宽度100％

1 个答案: