在移動互聯網蓬勃發展的今天，很多開發者會選擇使用 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-函數式編程]-源碼解析)
