前言：
使用uniapp做的h5頁面，在PC端顯示時，發現由于upx單位計算基準值太大，導致頁面排班布局錯亂
思路：
剛開始發現使用px單位不會導致頁面布局混亂，但這對剛開啟的項目友好，對已經成型的項目修改成本太高，風險也大，而且px是固定單位，在移動端顯然沒upx好使；
后來百度好久，發現都沒有解決辦法，偶然間突發奇想，能不能利用iframe在頁面載入前將寬度設置為375px(750upx)，來達到欺騙瀏覽器，欺騙uniapp，讓瀏覽器以375px(這個值可以自己按需設置)基準值來計算upx=>px轉換比，然后setimeout 300毫秒（延遲時間自己試驗吧，不一定300ms效果最好）將iframe寬度設置為100%，這樣一來在PC端就可以實現以375upx基準值渲染頁面了；
說干就干，demo在下面
pages.json: （iframe為項目首頁，用來判斷是移動端還是PC端，并對PC端做適配處理）
{
"pages": [
{
"path": "pages/iframe"
},
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationStyle" : "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "DEMO",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
pages/iframe頁面
<style lang="scss">
.container{
height: 100%;
iframe{
display: block;
width: 375px;
height: 100%;
opacity: 0;
animation: fadeShow .3s ease-in forwards .3s;
}
}
@keyframes fadeShow {
0% {
opacity: 0;
}
100%{
opacity: 1;
}
}
</style>
<template>
<view class="container flex justify-center">
<iframe v-if="!ismobile" :src="url" frameborder="0" :style="'width:'+width"></iframe>
</view>
</template>
<script>
export default {
data() {
return {
url: '',
width: '',
ismobile: true,
};
},
onLoad(opt) {
this.ismobile = this.isMobile();
let url = 'pages/index/index';//你的首頁
if(this.ismobile){
uni.redirectTo({
url: `/${url}`
})
}else{
this.url = `${location.href}${url}`;
this.width = '375px';
setTimeout(() => {
this.width = '100%';
},300)
}
},
onShow() {
},
methods:{
isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag?true:false;
}
}
};
</script>
缺陷：
f5刷新頁面時又會回到iframe初始頁面
2019/11/25更新：
好吧，今天去官方社區逛了一圈，發現有大神已經提出PC端適配方案了，就幾句代碼就OK了，突然發現我真是蠢啊，┭┮﹏┭┮
基于大神的方案修改了下：
新建一個pc.js，隨便找個地方放著,內部代碼如下(變量sw值的設置，你們覺得怎么好看怎么來吧，下面的是我根據我的感覺設置的,適配到8K屏幕了)：
;(function (){
var u = navigator.userAgent,
w = window.innerWidth;
if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf('iPad') > -1) {
var sw = w*576/1920;
window.innerWidth = sw<375?375:sw;
window.onload = function() {
window.innerWidth = w;
}
}
})();
然后再main.js里面引入pc.js
注意，pc.js一定要在App實例引入前引入，不然無效！！！
import '@/static/js/pc'
import Vue from 'vue'
import App from './App'
這樣做的好處是刷新頁面時，頁面之前的棧還在，不會像用iframe那樣刷新后就回到首頁；
至于我上面方案直接無視吧！┗( ▔, ▔ )┛
2019/11/26更新：
pc.js修改成下面這樣， PC端樣式就可以實現1upx = 1rpx = 1px；這樣非常方便的1:1還原設計圖了
當然如果你的設計圖不是1920，比如是1366，那下面就改成這樣window.innerWidth = 750*(w / 1366);
;(function (){
var u = navigator.userAgent,
w = window.innerWidth;
if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf('iPad') > -1) {
window.innerWidth = 750*(w / 1920);
window.onload = function() {
window.innerWidth = w;
}
}
})();
到此這篇關于uniapp+Html5端實現PC端適配的文章就介紹到這了,更多相關Html5 PC端適配內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
