uniapp h5端兼容pc端

大致效果就是用pc端打开h5网页，然后pc端可以像h5那样，不过pc端是页面居中左右两边留白的效果

第一步、创建一个js文件(随便创建在哪个位置)

// #ifdef H5
(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;};}
})();
// #endif

第二步、App.vue添加适配样式

<style lang="scss">
/*  #ifdef  H5  */
body {max-width: 828rpx;  //最大宽度自己可以调整margin: auto !important;
}
/*  #endif  */
</style>

第三步、main.js中引入pc.js（要在导入app示例之前引入）

import Vue from "vue";
//导入PC适配JS(H5)
// #ifdef H5
import "./common/services/pc";
// #endif
import App from "./App";

注意：“可能在pc端刷新会页面撑大，建议直接把最大宽度(max-width直接给定死到你要的“px”单位而不是rpx单位，所有的rpx单位都得换成px单位，因为pc端不支持rpx单位)”

比如我这里写的是828prx，那直接写成414px单位，如果觉得还是有点宽的话，可以改小一点，按照自己的需求来

uniapp h5端兼容pc端相关推荐

H5项目兼容PC端和移动端的方案(持续跟新)
文章目录一.利用CSS媒体查询维护两套样式拓展-媒体查询二.移动端1像素线问题三.移动端 H5 滑动穿透四.适配深色模式一.利用CSS媒体查询维护两套样式媒体查询:实现页面在不同设备下正 ...
uniapp适配pc_uni-app H5 平台在 PC 端实现适配
该文章已过时,请忽视.从 uni-app 2.9 起,官方已提供了 PC 等宽屏的适配方案. 使用 uni-app 开发的 H5 页面,为了根据屏幕宽度自适应,我们一般都采用官方推荐的动态单位 rpx ...
移动端开发、各种兼容问题、响应式布局开发、移动端和PC端开发的不同
文章目录一.移动端开发二.移动端开发和PC端开发的不同 1.@1 响应式布局开发 2.关于CSS3的兼容 3.关于ES6+的兼容 4.还有一些移动端独有的兼容问题: 三.DPR:屏幕像素密度比「高 ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
uniapp宽屏开发PC端方案，及衍生问题解决
需要在uniapp的pages.json文件中配置 "rpxCalcMaxDeviceWidth": 3840, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 96 ...
360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案！
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
移动端和pc端的区别
PC端与移动端的区别 pc端与移动端从兼容性.事件处理.布局.动画处理上来说有五种区别 1.从兼容方面来说, PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是andro ...

uniapp h5端兼容pc端

uniapp h5端兼容pc端相关推荐

最新文章

热门文章