uniapp+Html5端實(shí)現(xiàn)PC端適配
我要評(píng)論前言：
使用uniapp做的h5頁(yè)面，在PC端顯示時(shí)，發(fā)現(xiàn)由于upx單位計(jì)算基準(zhǔn)值太大，導(dǎo)致頁(yè)面排班布局錯(cuò)亂
思路：
剛開(kāi)始發(fā)現(xiàn)使用px單位不會(huì)導(dǎo)致頁(yè)面布局混亂，但這對(duì)剛開(kāi)啟的項(xiàng)目友好，對(duì)已經(jīng)成型的項(xiàng)目修改成本太高，風(fēng)險(xiǎn)也大，而且px是固定單位，在移動(dòng)端顯然沒(méi)upx好使；
后來(lái)百度好久，發(fā)現(xiàn)都沒(méi)有解決辦法，偶然間突發(fā)奇想，能不能利用iframe在頁(yè)面載入前將寬度設(shè)置為375px(750upx)，來(lái)達(dá)到欺騙瀏覽器，欺騙uniapp，讓瀏覽器以375px(這個(gè)值可以自己按需設(shè)置)基準(zhǔn)值來(lái)計(jì)算upx=>px轉(zhuǎn)換比，然后setimeout 300毫秒（延遲時(shí)間自己試驗(yàn)吧，不一定300ms效果最好）將iframe寬度設(shè)置為100%，這樣一來(lái)在PC端就可以實(shí)現(xiàn)以375upx基準(zhǔn)值渲染頁(yè)面了；
說(shuō)干就干，demo在下面
pages.json: （iframe為項(xiàng)目首頁(yè)，用來(lái)判斷是移動(dòng)端還是PC端，并對(duì)PC端做適配處理）
{
"pages": [
{
"path": "pages/iframe"
},
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationStyle" : "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "DEMO",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
pages/iframe頁(yè)面
<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';//你的首頁(yè)
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刷新頁(yè)面時(shí)又會(huì)回到iframe初始頁(yè)面
2019/11/25更新：
好吧，今天去官方社區(qū)逛了一圈，發(fā)現(xiàn)有大神已經(jīng)提出PC端適配方案了，就幾句代碼就OK了，突然發(fā)現(xiàn)我真是蠢啊，┭┮﹏┭┮
基于大神的方案修改了下：
新建一個(gè)pc.js，隨便找個(gè)地方放著,內(nèi)部代碼如下(變量sw值的設(shè)置，你們覺(jué)得怎么好看怎么來(lái)吧，下面的是我根據(jù)我的感覺(jué)設(shè)置的,適配到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實(shí)例引入前引入，不然無(wú)效?。?！
import '@/static/js/pc' import Vue from 'vue' import App from './App'
這樣做的好處是刷新頁(yè)面時(shí)，頁(yè)面之前的棧還在，不會(huì)像用iframe那樣刷新后就回到首頁(yè)；
至于我上面方案直接無(wú)視吧！┗( ▔, ▔ )┛
2019/11/26更新：
pc.js修改成下面這樣， PC端樣式就可以實(shí)現(xiàn)1upx = 1rpx = 1px；這樣非常方便的1:1還原設(shè)計(jì)圖了
當(dāng)然如果你的設(shè)計(jì)圖不是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;
}
}
})();
到此這篇關(guān)于uniapp+Html5端實(shí)現(xiàn)PC端適配的文章就介紹到這了,更多相關(guān)Html5 PC端適配內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
uniapp scroll-view基礎(chǔ)用法和示例
在uniapp日常開(kāi)發(fā)的過(guò)程中經(jīng)常會(huì)有局部滾動(dòng)的需求，而scroll-view組件正好可以滿足這一需求，這篇文章主要介紹了uniapp scroll-view基礎(chǔ)用法和示例,需要的朋友可以參考下2023-06-19
