前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏

这篇具有很好参考价值的文章主要介绍了前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏


说明

公司项目做之前没有沟通好,按照1920*1080设计图做的页面,缩放比是100%,项目做完之后说要适配缩放比,并且 适配4k屏,然后就各种百度找办法。


一、首先是适配屏幕的缩放比

这种方法也是通过看别人发布的文章解决的,原来的地址在这:前端 解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响
我是用的第二种方法,直接就粘过来了。

1.在外部创建一个detectZoom.js文件,我是在utils文件夹下

detectZoom.js文件代码如下:

export const detectZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return ratio;
};

2.在main.js中引用

m是获取的当前屏幕的缩放比,在通过zoom属性对应缩放。
zoom属性用于设置或检索对象的缩放比例。

import { detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

以上为解决屏幕缩放比的方法,在屏幕分辨率为1920*1080时可以解决。

二、解决4k屏幕的问题

在项目做完之后突然告知需要适配4k屏,并且4k屏的时候也会有屏幕缩放比,不想重新改页面样式就想了这个办法。也是通过zoom属性,原理就是通过整个body的缩放使系统的展示区域变成1920*1080

1.获取当前屏幕的分辨率

获取屏幕的宽:window.screen.width * window.devicePixelRatio
获取屏幕的高:window.screen.height * window.devicePixelRatio

2.根据不同屏幕和缩放比来调节zoom的比例

在main.js中 代码如下:

import { detectZoom } from '@/utils/detectZoom.js';

const m = detectZoom();
 //判断屏幕是否为4k
if (window.screen.width * window.devicePixelRatio >=3840) {
  // switch (m) {
  //   // 4k屏时屏幕缩放比为100%
  //   case 100:
  //     document.body.style.zoom = 100 / 50;
  //     break;
  //     // 4k屏时屏幕缩放比为125%
  //   case 125:
  //     document.body.style.zoom = 100 / 62.5;
  //     break;
  //     // 4k屏时屏幕缩放比为150%
  //   case 150:
  //     document.body.style.zoom = 100 / 75;
  //     break;
  //     // 4k屏时屏幕缩放比为175%
  //   case 175:
  //     document.body.style.zoom = 100 / 87.4715;
  //     break;
  //     // 4k屏时屏幕缩放比为200%
  //   case 200:
  //     document.body.style.zoom = 100 / 100;
  //     break;
  //     // 4k屏时屏幕缩放比为225%
  //   case 225:
  //     document.body.style.zoom = 100 / 112.485;
  //     break;
  
  //   default:
  //     break;
  // }
  document.body.style.zoom = 100 / (Number(m)/2);
}else{
  document.body.style.zoom = 100 / Number(m);
}

最后结果:虽然屏是4k的,但是系统展示页面的可视区域依旧是1920*1080的,页面样式也没有乱。文章来源地址https://www.toymoban.com/news/detail-430826.html

到了这里,关于前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 根据cadence设计图学习硬件知识day04了解一些芯片

            PI3PCIE3212是PCIe Gen3.0、8Gbps、4对2差分,PCI ExpressR 3.0性能,8.0Gbps  双向信道多路复用器/多路分解器开关。由于其低的位对位偏斜,高的通道对通道噪声隔离双向操作和带宽,该产品是PCI Express°3.0信号的理想选择3dB带宽:8.1GHz以8.0Gbps进行切换。低位到位倾斜,最大

    2023年04月22日
    浏览(69)
  • 【O2O领域】Axure外卖订餐骑手端APP原型图,外卖配送原型设计图

    页面数量:共 110+ 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:外卖配送、生鲜配送 作品申明:页面内容仅用于功能演示,无实际功能 本品为外卖订餐骑手端APP原型设计图,定位属于外卖海外版,覆盖配送APP主流功能,除了结算是菲律宾比索,功能与国内版大同小异

    2024年02月12日
    浏览(45)
  • 【O2O领域】Axure外卖订餐骑手端APP原型图,外卖众包配送原型设计图

    页面数量:共 110+ 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:外卖配送、生鲜配送 作品申明:页面内容仅用于功能演示,无实际功能 本品为外卖订餐骑手端APP原型设计图,定位属于外卖海外版,覆盖配送APP主流功能,除了结算是菲律宾比索,功能与国内版大同小异

    2024年02月12日
    浏览(39)
  • Centos7设置1920x1080分辨率

    Centos7设置分辨率 步骤一: 添加自己想要修改的分辨率如cvt 1920 1080 60 步骤二: 复制cvt结果第二行中 ‘Modeline’ 后面的所有内容,并粘贴到xrandr --newmode 后面,即可新建一个分辨率: 例如 :xrandr --newmode “1920x1080_60.00” 173.00 1920 2048 2248 2576 1080 1083 1088 1120 -hsync +vsync 步骤三:

    2024年02月13日
    浏览(46)
  • 图片1920x1080分辨率怎么调 ?图片如何修改分辨率?

    图片是我们日常生活中经常需要使用到的东西,但是在使用图片时我们会遇到需要调图片分辨率的情况,有很多小伙伴对于图片分辨率这个概念并不了解,今天就来为大家具体介绍一下图片1920x1080怎么调以及怎么给图片 修改分辨率 ,下面一起来看一下吧。 图片1920x1080分辨率

    2024年02月16日
    浏览(52)
  • elementUI 特定分辨率(如1920*1080)下el-row未超出一行却换行

    在1920*1080分辨率下, el-col 内容未超出 el-col 宽度, el-col 不足以占据一行, el-row 却自动换行了(其他分辨率没有这个问题)。 截图: 排查: el-col 内容没有溢出; 没有多余的 padding 与 margin ; 整个 el-row 宽度没有超出父元素的宽度 样式布局没有问题 解决方案: 设置 el-ro

    2024年02月08日
    浏览(41)
  • centos7新增分辨率 1920 1080 ,网上各种方法大罗列!(亲测针对不同设备,有的有用!有的......)

    步骤总结如下: cvt 1920 1080 xrandr --newmode \\\" 1920x1080_60.00\\\"173.0019202048 2248 2576 1080 1083 1088 1120 - hsync +vsync xrandr --addmode VGA-1 “1920x1080_60.00” (VGA-1 要看自己的配置,别瞎改) xrandr -s 1920x1080_60.00 要想永久生效,请看文末几种方法 (总结网上多种方法) 具体过程截图如下!! cvt 1920

    2024年02月10日
    浏览(38)
  • 物理机ubuntu系统--远程控制-不接显示器-使用虚拟显示器-设置分辨率1920*1080

    liunx系统与intel显卡驱动不兼容的机制问题,导致有些机器无法在没有显示器的情况下,不能进行远程,向日葵和TeamViewer都不行。 因此使用虚拟显示器的软件 Xorg 。 反正网上很多资料。本文只是添加图片,更加详细的过程,以及遇到的情况,给予需要帮助的人,帮到你的话,

    2024年02月10日
    浏览(60)
  • wpf 系统在显示器分辨率和缩放设置为非1920*1080和100%时,SelectionChanged事件响应问题分析?

    系统在显示器分辨率和缩放设置为1920*1080和100%时,窗口四分格能正常响应SelectionChanged事件,但是当缩放为125%时,或是分辨率大于1920*1080时四分格其中一个格子的下侧和右侧点击不响应,什么原因?   描述的问题可能由以下几个原因导致: 布局问题 : 在高分辨率或较高缩放

    2024年02月03日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包