写到PC端中"/>
vue中如何将H5写到PC端中
最近接了个新需求，将H5的页面写道PC端中
方法1
vue中的public有一个index.html文件了，而且适配已经写好，所以在不动适配的情况下使用一个iframe的元素进行PC插入另一个index-pc.html文件
话不多说，直接上代码
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/><link rel="icon" href=""><title>H5变PC端</title><style type="text/css">body {margin: 0;padding: 0;}.hidden-scroll {scrollbar-width: none;-ms-overflow-style: none;}.hidden-scroll::-webkit-scrollbar {display: none; /* Chrome Safari */}.iframe {position: fixed;width: 375px;height: 750px;left: 50%;margin-left: -187.5px;}</style></head><body><div class="iframe hidden-scroll"><iframe src="./index.html" frameborder="0" style="width: 100%; height: 100%;"></iframe></div></body>
</html>这里主要用了滚动框和使用iframe引入public中的index的html文件。然后写好对应的css样式即可
注意，进入的时候只能使用pc端的链接进入，原链接进不了
方法2：直接在main.js中使用判断进行字符串替换跳转即可，前提是基于方法1的基础上
在main.js中，最后加入移动端或者PC端的判断，从而进行对应的页面跳转
获取对应的网址然后使用replace将对应的html字符串替换跳转即可
if (判断是不是PC端) {
let url = location.href.replace('index-pc.html', 'index.html')
location.href = url
}
坑：1，不要再index.vue中的生命周期里面写判断，会一直死循环跳转链接
2，不要改适配，移动端会崩，
3，不要用媒体查询或者外层包个div，虽然可以解决，但是要写很多css数据，反正我比较拒绝
更多推荐
vue中如何将H5写到PC端中
发布评论