0

我在使用 Android 浏览器时遇到了最奇怪的渲染问题之一（到目前为止 Galaxy Tab 10.1 和 S3 .. 尚未在 iPhone 或其他移动浏览器上测试过）。

我正在网页上动态嵌入一个固定位置的响应式 Youtube 视频。您单击 Javascript 中的一个按钮 - 它会创建一个黑色背景（也是固定位置）和一个嵌入了 id 的 Youtube，因此我可以控制不同屏幕尺寸的属性。到现在为止还挺好。这顺利进行。我在 Chrome、Firefox 甚至 IE 中查看了它，我并不感到失望。然而。

我在我的 Android 手机（Galaxy S3-股票浏览器）上查看了它，看起来视频很难理解它应该在哪里呈现。我注意到至少有 3 次重新定位，然后它才固定在一个位置。有时我很幸运地看到部分元素出现在屏幕上。大多数其他时候，就没有那么幸运了。代码没有改变，浏览器大小肯定没有改变；只是渲染了。

更糟糕的是，似乎元素实际上放置在正确的位置，但渲染不正确。如果我点击中心（或足够靠近它），视频就会播放！渲染显示它在不断重新渲染时播放，仍然不确定它应该在哪里。

我知道这个问题听起来超级疯狂，甚至诊断（更不用说调试）可能是一个棘手的问题，所以我尽可能多地包含与整个操作相关的代码。非常感谢您的帮助！

创建和嵌入视频

donModal.addEventListener("click", function(e) {

        e.preventDefault();

        var donPreview = document.createElement("iframe");
        donPreview.src = "http://www.youtube.com/embed/oeZgLFsglcc";
        donPreview.frameborder = "0";
        donPreview.allowfullscreen = "allowfullscreen";
        donPreview.id = "donModalVideo";

        document.body.appendChild(donPreview);

        sfx.toggleBackdrop(donPreview);         
    });
}

视频风格

#donModalVideo {
  position: fixed;
  width: 40%;
  height: 50%;
  top: 25%;
  left: 30%;
  z-index: 95;
}

测试网址

现在不能摆弄..希望这没关系...

http://openheavens.designbymobius.ca/artistes#donmoen

4

1 回答 1

0

解决了！！！

造成这个问题的因素有很多。

  1. 没有为它设置高度（或者它的父元素）。
  2. 固定位置在移动设备上出现故障

有了这些知识，我：

  1. 将位置属性更改为静态。
  2. 编写了一个小函数来将高度设置为宽度的固定比率（我使用 0.5625），每次调整窗口大小时都会触发。现在视频大小是灵活的，它完美地保持了它的比例。
  3. 编写了第二个函数将顶部值设置为(viewport height - video height) / 2+ window.pageYOffset。每当您滚动页面时都会触发它。

最终结果是一个静态位置视频，它动态调整宽度，同时保持其比例以及模拟位置效果：固定。

最终结果可以在这里看到。点击观看艺术家预览视频 :)

于 2012-12-20T17:12:57.427 回答