介绍 {
,“pages":,
{才能
,才能“path":,“页面/iframe"
,,},
{才能
,才能“path":,“页面/索引/index"
,,}
,),
,“globalStyle": {
“才能navigationStyle",:,“custom",
“navigationBarTextStyle"才能:,“black"
“navigationBarTitleText"才能:,“DEMO"
“navigationBarBackgroundColor"才能:,“# F8F8F8"
“backgroundColor"才能:,“# F8F8F8"
,}
} & lt; style lang=皊css"比;
,.container {
,,身高:100%;
iframe{才能
,,,显示:块;
,,,宽度:375 px;
,,,身高:100%;
,,,不透明度:0;
,,,动画:fadeShow .3s ease-in forwards 3;
,,}
,}
,@keyframes fadeShow {
0%的才能,{
,,,不透明度:0;
,,}
100%{才能
,,,不透明度:1;
,,}
,}
& lt;/style> & lt; template>
,& lt; view 类=癱ontainer flex justify-center"比;
& lt;才能iframe v=? ismobile",: src=https://www.yisu.com/zixun/帧边缘“url”=?”:风格="宽度:+宽度”>
& lt; script>
,export default {
数据才能(),{
,,return {
,,,url:, & # 39; & # 39;
,,,宽度:,& # 39;& # 39;
,,,ismobile:,真的,
,,};
,,},
onLoad才能(选择),{
,,this.ismobile =, this.isMobile ();
,,let url =, & # 39;页/索引/指数# 39;;//你的首页
,,如果(this.ismobile) {
,,,uni.redirectTo ({
,,,,url:,“/$ {url}”
,,,})
其他,,}{
,,,this.url =,“$ {location.href} $ {url}”;
,,,this.width =, & # 39; 375 px # 39;;
,,,setTimeout((),=祝辞,{
,,,,this.width =, & # 39; 100% & # 39;;
,,,},300)
,,}
,,},
昂秀(),{才能
,,
,,},
方法:{才能
,,isMobile (), {
,,,,,,,,,let flag =, navigator.userAgent.match(/(电话|垫| pod iPhone iPad iPod ios | | | | |安卓手机黑莓| | | IEMobile | MQQBrowser | JUC | Fennec | wOSBrowser | BrowserNG | WebOS塞班| | Windows 电话)/i)
,,,,,,,,,return 旗帜?真的:假;
,,,,,,,,}
,,}
,};
& lt;/script> ; (function () {
,var u =, navigator.userAgent,
时间=w 才能;window.innerWidth;
,if (! u.match (/AppleWebKit。*。*/), | |, u.indexOf (& # 39; ipad # 39;),祝辞,1),{
var 才能;sw =, w * 576/1920;
window.innerWidth 才能=,sw<375 ? 375:西南;
,,,,,,,,,,,,,,,window.onload =,()函数,{
,,,,,,,,,window.innerWidth =, w;
,,,,,,,,}
,}
})(); import & # 39; @/静态/js/pc # 39;
import Vue 得到& # 39;vue # 39;
import App 得到& # 39;。/应用# 39;
这篇文章给大家分享的是有关uniapp + Html5端怎么实现PC端适配的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>前言:
使用uniapp做的编辑页面,在PC端显示时,发现由于upx单位计算基准值太大,导致页面排班布局错乱
<强>思路:
刚开始发现使用px单位不会导致页面布局混乱,但这对刚开启的项目友好,对已经成型的项目修改成本太高,风险也大,而且px是固定单位,在移动端显然没upx好使;
后来百度好久,发现都没有解决办法,偶然间突发奇想,能不能利用iframe在页面载入前将宽度设置为375 px (750 upx),来达到欺骗浏览器,欺骗uniapp,让浏览器以375 px(这个值可以自己按需设置)基准值来计算upx=祝辞px转换比,然后setimeout 300毫秒(延迟时间自己试验吧,不一定300 ms效果最好)将iframe宽度设置为100%,这样一来在PC端就可以实现以375 upx基准值渲染页面了;
<强>说干就干,演示在下面
页面。json: (iframe为项目首页,用来判断是移动端还是PC端,并对PC端做适配处理)
页面/iframe页面
缺陷:
f5刷新页面时又会回到iframe初始页面
<强> 2019/11/25更新:
好吧,今天去官方社区逛了一圈,发现有大神已经提出PC端适配方案了,就几句代码就好了,突然发现我真是蠢啊,┭┮﹏┭┮
基于大神的方案修改了下:
新建一个pc.js,随便找个地方放着,内部代码如下(变量sw值的设置,你们觉得怎么好看怎么来吧,下面的是我根据我的感觉设置的,适配到8 k屏幕了):
然后再main.js里面引入pc.js
注意,电脑。js一定要在应用实例引入前引入,不然无效! ! !
