iPhone 12移动端横屏模式下视频全屏显示适配问题
2026-4-29
解决iPhone 12横屏时视频无法全屏铺满边缘的问题
我帮你排查了代码里的几个关键问题，这些是导致iPhone横屏时视频不能铺满屏幕的核心原因，下面是修复后的完整代码和详细修改说明：
问题根源分析
- 你在video标签的内联样式里设置了
object-fit: contain，这个属性会强制视频保持原比例完整显示，所以必然会出现黑边无法铺满屏幕 - CSS里重复定义了video的样式规则，比如同时设置了
position: fixed和position: absolute，导致属性冲突 - viewport标签缺少
viewport-fit=cover，iOS设备需要这个属性让页面内容延伸到屏幕的刘海、圆角等特殊区域
修复后的完整代码
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" charset="utf-8"> <head> <title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title> <style> .relative{font-size: 25px;} .absolute{font-size: 13px;} @media (max-width: 1130px) and (min-width: 280px){ .relative{font-size: 11px; position: absolute; top: -15px; left: -30px;} .absolute{font-size: 6px; position: absolute; top: 4px; left: -15px;} .home_page {position: fixed; top: 470px; left: -8px;} } .video-container { position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .video-container video { min-height: 100%; min-width: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); object-fit: cover; /* 确保视频铺满容器，裁剪超出部分 */ } @media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape){ .home_page { position: fixed; top: 180px; left: 160px; font-size: 20px; } } .relative { position: absolute; top: -10px; left: -13px; z-index: 3; } .absolute { position: absolute; left: 28px; top: 28px; z-index: 3; } .home_page { position: fixed; top: 520px; left: 410px; z-index: 3; } p { color: white; text-decoration:none; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000; font-size: 400%; margin: 50px; position: relative; } </style> </head> <body> <div class="video-container"> <video src="Home_Page.mp4" autoplay loop muted playsinline></video> </div> <div class="relative"> <p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;"> <a href="Home.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 darkgray,-1px 1px 0 darkgray,1px -1px 0 darkgray,-1px -1px 0 darkgray;">盛りこぼし</a> </p> </div> <div class="absolute"> <p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;"> <a href="Home_English.html" style="text-decoration:none; color: black; opacity: .8; text-shadow:.5px .5px 0 #FFFFFF,-.5px .5px 0 #FFFFFF,.5px -.5px 0 #FFFFFF,-.5px -.5px 0 #FFFFFF;">MORIKOBOSHI</a> </p> </div> <div class="home_page"> <p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"> <a href="Website_Home_Page.html" style="text-decoration:none; color: white;"><b>日本語</b></a> | <a href="Website_Home_Page_English.html" style="text-decoration:none; color: white;"><b>English</b></a> </p> </div> </body> </html>
关键修改点说明
- 优化viewport配置：添加
viewport-fit=cover，让页面内容可以完全覆盖iOS设备的屏幕（包括刘海、圆角区域），解决横屏时边缘留白问题 - 统一video的object-fit属性：移除内联样式的
object-fit: contain，在CSS里设置object-fit: cover，这样视频会铺满整个容器，同时保持宽高比，裁剪超出部分，不会出现黑边 - 合并重复的CSS规则：把分散的媒体查询和重复的video样式整合，避免属性冲突，确保样式优先级正确
- 调整z-index层级：明确设置各个元素的z-index，确保视频在最底层，文字内容在上方正常显示
- 清理冗余样式：移除了内联样式里重复的text-shadow，统一在p标签的CSS里定义
这样修改后，iPhone 12横屏时视频应该就能完全铺满屏幕边缘了。
内容的提问来源于stack exchange，提问作者Richard
