序言：
应用uniapp做的h5网页页面，在PC端显示信息时，发觉因为upx企业测算标准值很大，造成网页页面排班合理布局紊乱
构思：
一开始发觉应用px企业不容易造成网页页面合理布局错乱，但这对刚打开的新项目友善，对早已成形的新项目改动成本费太高，风险性也大，并且px是固定不动企业，在手机端显而易见没upx管用；
之后百度搜索好长时间，发觉也没有处理方法，不经意间突发性奇想，能否运用iframe在网页页面加载前将总宽设定为375px(750upx)，来做到蒙骗访问器，蒙骗uniapp，让访问器以375px(这一值能够自身按需设定)标准值来测算upx=>px变换比，随后setimeout 300毫秒（延迟时间時间自身实验吧，不一定300Ms实际效果最好）将iframe总宽设定为100%，那样一来在PC端便可以完成以375upx标准值3D渲染网页页面了；
说干就干，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端兼容內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！
Copyright © 2002-2020 免费自助建站_手机建站平台_wap建站_免费自助建站平台_H5网站,H5模板建站 版权所有 （网站地图） 粤ICP备10235580号