iOS/iPad下HTML视频的尺寸问题
在Windows10 (Firefox或Edge)和我测试的一款Android手机上，1080P视频(1920像素宽)的宽度恰好是4K显示器的一半。
但当网页在Safari 10 (仅在Safari上测试)或iPad Air3( Edge和Chrome)上打开时，视频会被“放大”，占据设备屏幕的比例比我预期的要大得多。例如，iPad Air3的屏幕分辨率应该是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>回答 1
Stack Overflow用户
发布于 2020-10-05 08:41:28
我自己找到了答案。事实证明，当涉及到iPad时，物理像素并不是1比1用于显示。在我的iPad中，它是2:1，这意味着2224X1668像素的硬件分辨率对应于1112X834“点”的显示大小(通过访问“whatismyscreenresolution.net”验证)，从而创建了观察到的行为。无法更改iPad的显示大小。但是，如果Safari的默认100%页面缩放设置更改为50%，则视频海报图像将全部显示在屏幕上。我的Android手机的硬件分辨率为1280X720，显示屏尺寸为732X412。“降级”比iPad的要小，所以在我的测试中，事情看起来像预期的那样工作，但事实并非如此。
从文本大小的角度来看，由于这些移动屏幕的小尺寸，不使用原生硬件分辨率1:1进行显示是有意义的，因为否则默认的文本大小对一些人来说太小了，阅读起来很不舒服。这也解释了为什么即使iPad的物理像素比显示器的像素小，iPad上的照片看起来也不如我的4k电脑显示器上的清晰。
https://stackoverflow.com/questions/64174711
复制相似问题
腾讯云开发者
