使用 ipad 而不是网络查看网站时调整视频大小

Posted 2023-03-12

【中文标题】使用 ipad 而不是网络查看网站时调整视频大小

【英文标题】：Video resize when using ipad instead of web to view website

【发布时间】：2014-03-10 16:53:36

【问题描述】：

我正在制作一个响应式网站，在该网站的首页上有一段视频作为介绍。由于主容器的宽度设置为 100%。当屏幕尺寸减小或增大时，视频会重新调整大小。问题是我也希望视频的高度重新调整大小。就好像视频覆盖了 Ipad 屏幕的整个视口，让网站的其余部分进一步向下滚动。我尝试使用 jquery $(window).height(); 但总是给出错误的高度，并且视频的高度不根据视口。有什么方法可以使用 jquery 或 css3 以更好、更准确的方式检测 iphone、ipad 等设备的视口高度？

【参考方案1】：

用 jQuery 来做：

找出并保存页面上所有视频的宽高比。 调整窗口大小时，确定内容区域的新宽度并调整所有视频的大小以匹配该宽度与它们的 原始纵横比。

$(函数()

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() 

    $(this)
        .data('aspectRatio', this.height / this.width)

        // and remove the hard coded width/height
        .removeAttr('height')
        .removeAttr('width');

);

// When the window is resized
// (You'll probably want to debounce this)
$(window).resize(function() 

    var newWidth = $fluidEl.width();

    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() 

        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.data('aspectRatio'));

    );

// Kick off one resize to fix all videos on page load
).resize();

参考资料： Fluid width vedio

See demo

【讨论】：

我真的觉得这很有用，但它如何帮助我根据 ios 设备的视口制作视频高度？

可以添加相应的 CSS 媒体查询（viewport）.. 见webdesignerwall.com/tutorials/…

@user1001176 一切都在上面的链接中得到了很好的解释..包括 （重置 iPhone 视口和初始规模）