css - 响应式分辨率，适用于移动和桌面浏览器

Question

我有一个关于 <video> 的简单问题标签。

我想构建一个在 PhoneGap 上运行的简单全屏视频聊天(移动)和桌面浏览器 ( Chrome )。

我需要的是视频保持全屏显示，无论是来自移动摄像头还是桌面浏览器摄像头。我猜他们会有不同的纵横比，我不明白如何合并这个问题。

我担心的是，当视频来自移动摄像头时，它如何适应更大的整个浏览器屏幕(全屏)？

很抱歉，如果我还没有尝试过任何东西，但我只是想了解从什么开始，背后的逻辑。

感谢任何提示!

Answer 1

如果你不想改变视频的宽高比，那么你只能制作全屏 Canvas 。视频仍将以原始宽高比显示，周围将是黑色空间。要使其全屏显示，请使用 width: 100%;高度:100%；位置:固定；。请记住，浏览器窗口并不总是采用常见的纵横比(16:9、4:3 等)，因为您可以在非最大化窗口中查看网站。宽高比将自定义。