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

Question

该行为符合 Windows 10（Firefox 或 Edge）和 Android phone 下的预期行为，例如，我使用 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>

Answer 1

自己找到了答案。事实证明，当涉及到 iPad 时，物理像素并不是 1 对 1 用于显示的。在我的 iPad 的情况下，它是 2:1，这意味着 2224 X 1668 像素的硬件分辨率对应于 1112 X 834“点”的显示尺寸（通过访问“whatismyscreenresolution.net”验证), 从而创造观察到的行为。无法更改 iPad 的显示大小。但是，如果将 Safari 的默认 100% 页面缩放设置更改为 50%，则视频海报图像全部适合屏幕。我的 Android phone 的硬件分辨率为 1280 X 720，显示尺寸为 732 X 412。“缩小”比 iPad 的小，所以一切正常在我的测试中预期他们不是。

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

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

Issue with dimension of HTML video under iOS/iPad

html

video

dimension

ipad

ios