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

Posted

技术标签:

【中文标题】使用 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 视口和初始规模)

以上是关于使用 ipad 而不是网络查看网站时调整视频大小的主要内容,如果未能解决你的问题,请参考以下文章

在android中缩放/最小化YoutubePlayerView时调整视频大小

在方向更改时调整 ConstraintLayout

如何在运行时调整 swf 的大小以让浏览器创建 html 滚动条?

iPad键盘分裂时调整UIPopover

在按钮单击时调整 div 的大小,这应该用 AJAX 完成吗?

Bootstrap 3 导航栏在滚动时调整大小并更改徽标