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

如何解决iOS / iPad下HTML视频的尺寸问题

此行为符合Windows 10（Firefox或Edge）的预期情况，例如，我使用1080P视频（1920像素宽）测试的Android手机正好占据了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>

解决方法

自己找到答案。事实证明，在iPad上，物理像素不是一对一地用于显示。在我的iPad上，它是2：1，这意味着2224 X 1668像素的硬件分辨率对应于1112 X 834“点”的显示大小（可通过访问“ whatismyscreenresolution.net”进行验证），从而创建了观察到的行为。 iPad不能更改显示尺寸。但是，如果将Safari的默认“ 100％页面缩放”设置更改为50％，则视频海报图像将全部显示在屏幕上。我的Android手机的硬件分辨率为1280 X 720，显示屏尺寸为732 X412。“小尺寸”小于iPad的尺寸，因此当它们不在时，事情似乎可以按照我的测试预期进行。

从文本大小的角度来看，由于这些移动屏幕的尺寸较小，因此不使用本机硬件分辨率1：1进行显示是有道理的，因为否则默认文本大小将太小，有些人无法舒适阅读。这也可以解释为什么即使在iPad的物理像素小于显示器的像素的情况下，iPad上的照片也比我的4k电脑显示器的锐度低。