解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题

这篇具有很好参考价值的文章主要介绍了解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

近期在工作中遇到一个问题,记录一下,在项目上线之后,遇到一个问题,即缩放到90%时,页面字体比默认的100%字体大,一开始毫无头绪,经过一番的Google...Google...Google....,终于找到了解决方法,这是因为大多数笔记本电脑默认的缩放比例为125%或者是150%,所以就出现了在本身台式电脑(默认100%)上开发出来的页面都是按照100%比例来开发的,之后在笔记本电脑上打开缩放比例的时候会出现字体大小显示不合理的问题,这种问题主要是因为device-pixel-ratio导致的。

解决办法:

1)新建一个js文件

// detectZoom.js
export const detectZoom = () => {
  let ratio = 0
  const screen = window.screen
  const 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中引入文章来源地址https://www.toymoban.com/news/detail-762424.html

import { detectZoom } from '@/utils/detectZoom';
// 处理笔记本系统默认系统比例为125%或150%带来的布局影响
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

到了这里,关于解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 关于笔记本电脑使用屏幕闪烁,但在打游戏时却不闪烁的问题解决

    笔记本型号:rog魔霸7plus 4060显         在一次跟新后,发现电脑出现日常使用屏幕闪烁的问题,比如看视频时眨眼一般,大约时隔20秒闪一次,当我头痛不已。但在平常玩一些大型游戏如APEX时,屏幕闪烁问题却没有出现。 网上找寻了问题解决方法:          有可能是屏幕

    2024年01月21日
    浏览(63)
  • 解决笔记本电脑拓展显示屏黑屏问题

    检查拓展显示器与笔记本连接线路是否正常。 Win+R,输入“devmgmt.msc”,检查设备管理器中显卡驱动是否正常。 若不正常,请卸载有问题的显卡驱动,安装360驱动大师检测安装显卡驱动,若正常,请往下一步。 笔记本电脑关机,拔出所有连接笔记本的硬件设备和数据线。 长

    2024年01月16日
    浏览(74)
  • 电脑技巧:笔记本电脑网络不显示wifi列表解决办法

     目录 1.WiFi功能被关闭 2.启用了飞行模式 3.WLAN连接被禁用 4.无线网卡驱动未安装 5.WLAN AutoConfig服务未启动 我的笔记本电脑连接wifi时,结果wifi列表中不显示任何的网络信息,这是怎么回事?要如何解决? 答:笔记本电脑上wifi功能的相关配置有问题。例如wifi功能未启用、开启

    2024年02月07日
    浏览(65)
  • 笔记本电脑插入网线显示未识别的网络,如何解决?

    1.选择桌面的网络,右键选择属性,进入网络和共享中心  2.选择更改适配器设置 以太网便是网线的网络连接:    3. 选中以太网右键---属性-----双击Internet协议版本4(TCP/IPv4)----进入属性栏--选择框中自动获得IP地址      

    2024年02月16日
    浏览(144)
  • 笔记本电脑控制树莓派,树莓派获取IP地址,连接笔记本电脑屏幕

    树莓派使用需要连接显示屏配备键盘和鼠标,为了方便实用可以直接连接到自己的笔记本电脑上,主要步骤如下: 第一步:获取树莓派IP地址 首先进行树莓派的系统烧录,烧录过程可以查看网上教程,有很多这里不再赘述,本文主要是针对已经烧录好的树莓派连接笔记本电脑

    2024年02月12日
    浏览(69)
  • 电脑\笔记本黑屏只有鼠标显示(explorer.exe解决)

    黑屏后搜索现有方法,使用Ctrl+Alt+Del打开任务管理器,新建文件运行explorer.exe发现没有,就是这个导致无法显示桌面,因此选择复制其它win10的explorer.exe拷贝到笔记本的C盘中,具体步骤如下: 1.Ctrl+Alt+Del打开界面,长按shift,鼠标点击重启,进入如下页面 2.选择疑难解答→高

    2024年03月21日
    浏览(61)
  • 前端适配笔记本缩放125%,150%导致页面错乱问题

    由于前端在开发时使用的都是标准ui设计图,基本都是按照所以1920*1080, 而小屏幕笔记本由于分辨率高,所以导致的显示元素变小,因此很多笔记本的默认显示都是放大125%或者150%。 如果页面比较简单就让多余的空白单边扩展,这样可以不受影响,但是如果页面遍布了引入的

    2024年02月11日
    浏览(43)
  • 如何彻底禁用笔记本电脑的键盘或者禁用笔记本的触控屏,及禁用后如何恢复,解决笔记本电脑蓝屏信息显示:“systern thread exception no handled” 失败操作“etd.sys

    目录 测试键盘是否失灵的软件 针对场景 网上教的方法——卸载掉PC/AT 增强型 PS/2 键盘(101/102 键) 具体做法 我推荐的做法——禁用笔记本的PC/AT 增强型 PS/2 键盘(101/102 键) 禁用笔记本键盘(PC/AT 增强型 PS/2 键盘(101/102 键)方法 禁用了笔记本键盘后虚拟键盘调用方式 恢复笔记本

    2024年02月09日
    浏览(69)
  • 小米笔记本电脑共享屏幕到苹果手机,这里有两个方法

    相信大家都知道苹果手机投屏到小米笔记本电脑的方法,今天分享一下将电脑投屏到苹果手机的操作。 你可以选择安装软件或不安装软件。 安装软件的方法: 第一步,在小米笔记本电脑和苹果手机都安装AirDroid Cast,两台设备连接同一个网络。 下载AirDroid Cast | 强大的投屏控

    2024年02月21日
    浏览(159)
  • 笔记本电脑开机后,屏幕无反应,插入的鼠标和键盘无灯亮起

    笔者今天的笔记本电脑突然开机后磁盘有反应,但是显示屏和鼠标都是未接入电源的情况。 一开始想进入安全模式检查一番,即开机连续按F12。第一次尝试可以进图安全模式,随后又键盘灯光和显示屏亮起,显示屏上显示进入安全模式,随后一两秒又再次再次黑屏。重复几次

    2024年02月14日
    浏览(86)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包