需同时配置viewport元标签、调用Fullscreen API、用CSS强制铺满并监听屏幕变化：1. viewport设width=device-width、initial-scale=1.0且禁缩放；2. 手势触发requestFullscreen()并兼容前缀；3. CSS用fixed+100vh/vw+overflow:hidden模拟全屏；4. 监听resize/orientationchange动态调整高度。
如果您希望在手机浏览器中让HTML5页面实现全屏显示，可能遇到页面无法铺满屏幕或全屏API调用失败的问题。以下是通过viewport设置与Fullscreen API配合实现手机全屏的具体方法：
一、正确配置viewport元标签
移动端全屏的基础是确保页面视口（viewport）不被缩放或裁剪，需通过meta标签精确控制初始缩放、用户缩放能力及视口尺寸。
1、在HTML文档的<head>内添加viewport meta标签。
2、设置width=device-width以匹配设备屏幕宽度。
立即学习“前端免费学习笔记（深入）”；
3、设置initial-scale=1.0且user-scalable=no，防止缩放干扰全屏布局。
4、添加maximum-scale=1.0和minimum-scale=1.0进一步锁定缩放行为。
5、完整代码示例：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
二、调用Fullscreen API触发原生全屏
Fullscreen API允许网页元素请求进入浏览器原生全屏模式，适用于支持该API的现代移动浏览器（如Chrome for Android、Samsung Internet等），但需用户手势触发。
1、选择一个容器元素（如<div id="fullscreen-container">）作为全屏目标。
2、为该元素绑定点击事件，调用requestFullscreen()方法。
3、兼容各浏览器前缀：检查element.requestFullscreen、element.webkitRequestFullscreen、element.mozRequestFullScreen、element.msRequestFullscreen。
4、在事件处理函数中加入条件判断，仅在用户点击后执行，避免因非手势触发被浏览器拒绝。
5、关键调用示例：document.getElementById('fullscreen-container').requestFullscreen();
三、使用CSS强制铺满视口并隐藏浏览器UI
当原生Fullscreen API不可用或受限时，可通过CSS模拟视觉全屏效果，隐藏地址栏、状态栏等系统UI，并拉伸内容至设备物理边界。
1、设置html与body高度为100%，消除默认边距。
2、为目标容器应用position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;。
3、添加overflow: hidden防止滚动条出现。
4、针对iOS Safari，追加-webkit-fill-available以适配安全区域。
5、关键样式示例：height: -webkit-fill-available; height: fill-available;
四、监听屏幕方向与尺寸变化动态调整
手机旋转或软键盘弹出会导致视口尺寸突变，影响全屏状态稳定性，需实时响应resize与orientationchange事件重新校准布局。
1、为window对象添加resize事件监听器。
2、在回调中读取screen.width与screen.height判断当前方向。
3、检测window.innerHeight是否显著小于screen.height，推测软键盘已展开。
4、根据实际可用高度重设容器height值，避免内容被遮挡。
5、关键判断逻辑：if (window.innerHeight
五、处理iOS Safari特殊限制与降级策略
iOS Safari对Fullscreen API有严格限制，不支持document.documentElement.requestFullscreen，且无法隐藏URL栏，需采用针对性方案。
1、检测用户代理字符串是否包含"iPhone"或"iPad"及"WebKit"。
2、对iOS设备放弃调用requestFullscreen，改用添加apple-mobile-web-app-capable= yes的meta标签。
3、引导用户将网页添加至主屏幕，启用Web App模式（此时无地址栏）。
4、在添加至主屏幕后，通过window.navigator.standalone判断是否处于独立模式。
5、关键meta配置：<meta name="apple-mobile-web-app-capable" content="yes">
