在手机上旋转时视频播放器不会调整大小答案

【问题标题】：Video player does not resize when rotating on phone在手机上旋转时视频播放器不会调整大小
【发布时间】：2020-02-02 01:16:51
【问题描述】：

每个人。我正在编写一个网站并在移动设备上对其进行测试。部署在这里：http://vizio.distro.tv/web.html

当我将手机旋转到水平位置时，有时视频会变得比屏幕大，我必须用手指放大以使其适合屏幕。然后，当我将手机旋转到垂直位置时，视频不会回到播放器容器中的原始位置，而是更大并超出屏幕。此问题对于“直播频道”视频更为常见。但是，当我在 Chrome 的开发者工具（使用其移动设备工具）上对其进行测试时，一切正常。

谁能帮我找出问题所在？如果需要，我可以提供代码。

【问题讨论】：

标签： html video iframe mobile

【解决方案1】：

尝试在<head> 标签中添加这个？

<meta name="viewport" content="width=device-width, user-scalable=no">

【讨论】：

【解决方案2】：

将您的视频播放器包装成<div></div> 您可以使用 CSS 的媒体查询来为您完成这项工作。 CSS 主要在网页响应方面发挥作用。

媒体查询也与此元标记合作

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

【讨论】：

谢谢，但我确实有这个标签。
那个元标记只是开始，真正的交易是用 CSS 编码媒体查询 ..参考这个stackoverflow.com/questions/6370690/…
你可能还想要关于媒体查询的逻辑css-tricks.com/logic-in-media-queries
我确实有控制视频播放器的 CSS 媒体查询逻辑。当我在 iPhone X、7、8、像素 2 等中旋转谷歌 Chrome 开发人员工具时，我发现它正在工作。但是在实际手机（我的 iPhone X）上旋转时，播放器无法正确调整大小。您可以在浏览器上打开它并在移动工具中检查它，然后在您的实际手机上打开该网站，看看它在旋转时的行为是否有所不同。
您的回答中有错字：withd