美文网首页
uniapp中H5端PC宽屏适配

uniapp中H5端PC宽屏适配

作者: 周星星的学习笔记 | 来源:发表于2021-11-01 12:49 被阅读0次

一、创建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";

相关文章

  • uniapp中H5端PC宽屏适配

    一、创建pc.js文件 二、App.vue添加适配样式 三、main.js中引入pc.js(要在导入app示例之前引入)

  • 移动端像素及视口的理解

    聊聊移动端的适配 H5开发相对于PC端web的开发,可以不用兼容那么多浏览器了,但是需要适配各种屏幕尺寸的适配。 ...

  • 移动端适配及pc端跳转代码

    移动端rem适配 pc端跳转

  • meta-viewport

    相关动态REM的文章 移动端高清、多屏适配方案使用Flexible实现手淘H5页面的终端适配 viewport v...

  • React 入门与实战

    适配PC or Mobile 端 - react-responsive

  • Nginx适配PC或移动设备

    Nginx适配PC或移动设备 现在很多网站都是有了PC端和H5站点的,因为这样就可以根据客户设备的不同,显示出体验...

  • 移动适配的问题

    移动站适配rel=alternate PC页和H5页适配标注 适配方式如下: 鉴于移动化大潮的汹涌和H5页的炫丽普...

  • vue一套代码适应移动端,pc端

    一、 使用场景:有适配pc端改为适配pc端和移动端,使用2套css代码实现App.vue 注意:为2套css分别指...

  • 2018-10-16移动设备兼容性

    移动设备h5 web网站手机H5页面的区别 分辨率不同,web端为宽屏,手机端为窄平移动设备兼容测试的问题 买手机...

  • vue vant移动端 rem 适配

    如果是做 PC 端的网页,无需做 rem 适配,但是做 H5 开发,rem 是需要做一下的,Vant 官方也为我们...

网友评论

      本文标题:uniapp中H5端PC宽屏适配

      本文链接:https://www.haomeiwen.com/subject/ituzaltx.html