在移动互联网蓬勃发展的今天，很多开发者会选择使用 UniApp 来开发多端应用，尤其是 H5 端，因其无需下载安装即可访问的特性，深受用户喜爱。但 UniApp H5 应用在 PC 端直接打开时，往往会因为屏幕尺寸的巨大差异，导致界面被拉伸、布局错乱，影响用户体验。
今天，我就来分享一个 UniApp H5 适配不同设备的解决方案，通过巧妙的页面跳转和布局设计，让你的 H5 应用在 PC 端也能拥有良好的展示效果
方案核心思路
我们的目标是：当用户在 PC 端（或大屏幕设备）访问 H5 应用时，自动跳转到一个模拟手机端展示的页面；而在移动设备上，则正常显示 H5 页面。
这个方案主要通过两个部分来实现：
- app.vue 中的页面跳转逻辑
- 专门为 PC 端准备的 pc.html 页面
具体实现步骤
第一步：在 app.vue 中添加设备判断与跳转逻辑
在 UniApp 项目的 app.vue 文件中，我们可以利用 onShow 生命周期函数，在页面显示时进行设备信息的判断，并根据判断结果决定是否跳转到 PC 端专用页面。
onShow: function() {console.log('App Show')// #ifdef H5uni.getSystemInfo({success(e) {/* 窗口宽度大于420px且不在PC页面且不在移动设备时跳转至 PC.html 页面 */if (e.windowWidth > 420 &&!window.top.isPC &&!/iOS|Android/i.test(e.system)) {// 跳转到PC端专用页面window.location.pathname = "/static/html/pc.html";}},});// #endif
}
第二步：创建 PC 端专用页面 pc.html
在项目的 static 目录下新建 html 文件夹，并在其中创建 pc.html 文件，内容如下：
<!DOCTYPE html>
<html lang=zh-CN><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title></title><meta name="Copyright" content="helang"><meta name="keywords" content=""><meta name="description" content=""><style type="text/css">body{margin: 0;background-color: #f5f5f5;}iframe{width: 375px;height: 667px;background-color: #fff;box-sizing: border-box;border: none;}@media screen and (min-width: 450px) {iframe {position: fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;border: 1px solid #f5f5f5;border-radius: 4px;}}</style><script type="text/javascript">window.isPC = true; // 标识当前为PC页面window.onload = function(){/* 监听电脑浏览器窗口尺寸改变，小于等于420px时跳回H5主页面 */if(window.innerWidth <= 420){window.location.pathname = '/';}}</script></head><body><iframe src="/" id="iframe"></iframe><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript">var Ip=returnCitySN['cip']localStorage.setItem('Ip', Ip)</script></body>
</html>
实现效果
- 当用户在 PC 端（大屏幕设备）访问你的 UniApp H5 应用时，会自动跳转到pc.html，看到一个居中显示的、模拟手机效果的应用界面。
- 当用户在移动设备（iOS/Android）访问时，会正常显示 H5 应用。
- 当用户在 PC 端调整浏览器窗口大小，使其宽度小于等于 420px 时，会自动跳回正常的 H5 页面。
使用注意事项
- 路径问题：确保 app.vue 中跳转的路径 /static/html/pc.html 与 pc.html实际存放的路径一致。如果你的项目有特殊的部署路径，可能需要相应调整。
- iframe 内容：pc.html 中 iframe 的 src 属性设置为/，适用于项目部署在根目录的情况。如果你的项目部署在子目录，需要修改为对应的路径。
- 样式微调：可以根据自己的需求调整 pc.html 中的 CSS 样式，比如 iframe的大小、边框样式、背景色等，使其更符合你的应用风格。
- IP 获取：搜狐的 IP 获取接口是免费的，但可能存在不稳定性。如果对 IP 获取有更高要求，可以考虑使用其他更可靠的接口。
总结
通过这种方式，我们可以很巧妙地解决 UniApp H5 应用在 PC 端展示效果不佳的问题。核心思路是通过设备判断和页面跳转，在 PC 端用一个模拟手机的 iframe 来展示应用，既保证了开发效率（无需单独开发 PC 端），又提升了用户体验。
当然，这种方案更适合一些对 PC 端体验要求不是特别高，或者主要用户群体还是在移动端的应用。如果你的应用需要在 PC 端有更完善的体验，那么开发专门的 PC 端页面会是更好的选择。
![[spring6: Mvc-函数式编程]-源码解析](http://pic.xiahunao.cn/[spring6: Mvc-函数式编程]-源码解析)
