使用 uni-app開發 H5平臺 項目在電腦瀏覽器中因瀏覽器分辨率問題會導致 rpx 單位元素尺寸過大，很是影響美觀。
本篇文章小編教大家一下簡單實用的解決方案
#1 創建一個電腦瀏覽器中專用的容器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>uni-app h5平臺在電腦瀏覽器打開解決方案</title>
<meta name="Copyright" content="helang">
<link rel="shortcut icon" type="image/png" href="/uniapp-extend/static/logo.png">
<meta name="keywords" content="黃河愛浪,WEB前端河浪,jQuery插件開發者河浪">
<meta name="description" content="公衆號:web-7258,QQ:1846492969,郵箱:[email protected]">
<style type="text/css">
body{
margin: 0;
background-color: #f3f3f3;
}
iframe{
width: 375px;
height: 667px;
background-color: #fff;
box-sizing: content-box;
border: none;
}
@media screen and (min-width: 450px) {
iframe {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: rgba(0,0,0,0.7) solid 10px;
border-radius: 4px;
}
}
</style>
<script type="text/javascript">
window.isPC = true;
window.onload = function(){
/* 監聽電腦瀏覽器窗口尺寸改變 */
window.onresize = function(){
/* 窗口寬度 小於或等於420px 時，跳轉回H5頁面 */
if(window.innerWidth <= 420){
window.location.pathname = '/uniapp-extend';
/* 若你的項目未設置根目錄（默認爲 / 時），則使用下方代碼 */
// window.location.pathname = '';
}
}
}
</script>
</head>
<body>
<iframe src="/uniapp-extend"></iframe>
<!--
若你的項目未設置根目錄（默認爲 / 時），則使用下方代碼
<iframe src="/"></iframe>
-->
</body>
</html>
#2 在uni-app項目的 App.vue 文件中寫下如下代碼：
/* ----- onLaunch 函數中的 JS 代碼 ----- */
/* 條件編譯，僅在H5平臺生效 */
// #ifdef H5
uni.getSystemInfo({
success(e){
/* 窗口寬度大於420px且不在PC頁面且不在移動設備時跳轉至 PC.html 頁面 */
if(e.windowWidth>420 && !window.top.isPC && !/iOS|Android/i.test(e.system)){
window.location.pathname = '/uniapp-extend/static/html/pc.html';
/* 若你的項目未設置根目錄（默認爲 / 時），則使用下方代碼 */
// window.location.pathname = '/static/html/pc.html';
}
}
})
// #endif
/* ----- 爲了避免電腦瀏覽器中的滾動條影響到佈局，可在 style 標記中添加如下 CSS 代碼 ----- */
/* 條件編譯，僅在H5平臺生效 */
// #ifdef H5
body::-webkit-scrollbar,html::-webkit-scrollbar {
display: none;
}
// #endif
源碼中跳轉路徑請按照自己的項目文件路徑改，因我的項目需要部署到git，則在發行H5平臺時定義了根目錄，若是默認的 / 直接根目錄，則修改正確的目錄即可，謝謝！
#3 效果預覽
電腦瀏覽器效果：
手機瀏覽器效果：
#4 在線體驗示例及完整源碼下載
該解決方案是簡單快速的，也可以模仿uni-app官方的h5平臺demo的解決方式，可自定義h5平臺模板，在模板中動態創建 iframe 的方式，得到更好的體驗效果，不用通過跳轉頁面，有興趣的請去自行學習。
許多人在閱讀過我的文章後，都會問我如何帶參數的問題。關於這個問題可以在跳轉 pc.html 頁面之前先獲取當前的 地址，然後打開 pc.html 頁面後，將跳轉前的地址賦值給 iframe 的 src 屬性即可！但是帶參數的意義不會很大，因爲畢竟是移動端的頁面，在PC中瀏覽會有各種事件不兼容的問題，所以去提示一個二維碼，讓用戶去用手機掃碼體驗會更好。
作者：黃河愛浪 QQ：1846492969，郵箱：[email protected]
微信公衆號：
web-7258，本文原創，著作權歸作者所有，轉載請註明原鏈接及出處。