iOS/iPad 下 HTML 视频的尺寸问题答案

【问题标题】：Issue with dimension of HTML video under iOS/iPadiOS/iPad 下 HTML 视频的尺寸问题
【发布时间】：2021-01-18 07:37:14
【问题描述】：

这种行为在 Windows 10（Firefox 或 Edge）和我测试的 Android 手机上是预期的，例如，1080P 视频（1920 像素宽）正好占 4K 显示器宽度的一半。

但是，当在 iPhone 10（仅使用 Safari 测试）或 iPad Air 3（Edge 和 Chrome）上打开网页时，视频会“放大”并占据设备屏幕的大部分，比我预期的要大得多。例如，iPad Air 3 的屏幕分辨率据称为 2224×1668，足以容纳 1080P 视频。但是，视频甚至不适合屏幕（我可以确认我没有意外放大。）

在我自己的故障排除中，HTML 已被尽可能地精简，下面是页面的整个 HTML。海报图片的尺寸与其对应的视频完全相同。

    <b>LD 360P:</b><p>
    <video width="640" height="360" controls preload="none" poster="2018California_360P_low_poster.jpg">
        <source src="2018California_360P_low.mp4" type="video/mp4">
    </video><p>
    <b>HD 720P:</b><p>
        <video width="1280" height="720" controls preload="none" poster="2018California_720P_low_poster.jpg">
            <source src="2018California_720P_low.mp4" type="video/mp4">
        </video><p>
    <b>HD 1080P:</b><p>
    <video width="1920" height="1080" controls preload="none" poster="2018California_1080P_high_poster.jpg">
        <source src="2018California_1080P_high.mp4" type="video/mp4">
    </video> 
<p>
<a href="photo13.html"><h3>Back to the list of albums</h3></a>

【问题讨论】：

您没有解释预期的行为是什么。这是至关重要的信息，不应留给读者（从代码、链接资源等）推断。

标签： html ios ipad video dimension

【解决方案1】：

自己找到了答案。事实证明，当涉及到 iPad 时，物理像素不是 1 比 1 用于显示的。对于我的 iPad，它是 2:1，这意味着 2224 X 1668 像素的硬件分辨率对应于 1112 X 834“点”的显示尺寸（通过访问“whatismyscreenresolution.net”进行验证），从而产生观察到的行为。无法更改 iPad 的显示尺寸。但是，如果将 Safari 的默认 100% 页面缩放设置更改为 50%，则视频海报图像都适合屏幕。我的 Android 手机的硬件分辨率为 1280 X 720，显示尺寸为 732 X 412。“缩小比例”比 iPad 的要小，所以在我的测试中，一切似乎都在按预期工作，而实际上并非如此。

从文本大小的角度来看，不使用原生硬件分辨率 1:1 进行显示是有意义的，因为这些移动屏幕的尺寸很小，否则默认的文本大小会太小，以至于某些人无法舒适地阅读。这也解释了为什么即使 iPad 的物理像素小于显示器的物理像素，照片在 iPad 上看起来也不如在我的 4k 电脑显示器上清晰。

【讨论】：