电脑屏幕分辨率导致页面变形解决方案

于 2024-04-03 16:33:21 发布
阅读量153 收藏
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36247432/article/details/137350164
版权

在App.vue 中添加

//获取当前分辨率下的可是区域宽度
let devicewidth = document.documentElement.clientWidth;
let scale = devicewidth / 1920; // 分母——设计稿的尺寸
document.body.style.zoom = scale;//放大缩小相应倍数

可根据页面大小等比例放大、缩小


不适用于ios

射手男很懒
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Winform界面运行变形解决方案
xiketangAndy的博客
10-30 1221
-Begin- 　　现在高分屏的电脑越来越多，2K屏，4K屏层出不穷，对于.net开发人员来说，尤其是Winform开发者，分辨率一直是个比较头疼的事情，屏幕分辨率高了，如果仍然设置显示100%，会导致字体非常小，影响观看，因此很多时候推荐的都是150%，200%，如果主显示器设置不是100%，打开Winform项目时，会以同样的百分比进行窗体显示，会导致界面变形等一系列的问题。 　　基于这种情形，在研究一番之后，给大家提供一下解决方案，主要有以下三种解决方案： 第一种是根据提示设置1..
winform分辨率问题解决方案
weixin_34168880的博客
02-04 750
2019独角兽企业重金招聘Python工程师标准>>> ...
Winform下调整缩放与布局以及分辨率下界面混乱解决办法
热门推荐
陈袁的博客
01-22 1万+
文章目录解决方案设置Form里字体大小 解决方案 设置Form里字体大小 根据像素来设置界面每个控件大小，界面将整体缩放而不会凌乱，利用的就是DPI本身的特性。 缺点是字体大小都一样的，如果每个控件单独设置那太麻烦了。不推荐 public static void SetAutoScaleMode(Form form) { //设定按字体来缩放控件 form.AutoScaleM...
关于Qt适配不同分辨率和缩放率时可能遇到的问题和解决方案
qq_34305316的博客
09-18 9250
如果没有特殊的处理，Qt的UI窗口在不同的分辨率和缩放率下，其显示效果可能会出现问题，常见的有：子控件堆叠，无法显示完整窗口尺寸变大，超出屏幕的显示范围控件变形，长宽比不合理界面模糊字体变大，控件尺寸却没有变化有两种方式可以对UI界面进行良好的缩放：Qt不做任何事情，由windows系统负责缩放windows系统不做任何事情，由Qt负责进行缩放。
不同分辨率下显示背景图片的解决方案
jyj545的专栏
11-07 1749
在进行web前段的开发过程中大家一定都遇到过随着PC分辨率的不同，背景图片也会发生变化，以下提供三种解决方案： 方案一：用js判断浏览器的分辨率，然后调用不同的css来进行显示 方案二：css3中有个属性是background-size，是用来伸缩背景图的，将其设置为background-size:100% 100%;就Ok了(注意：该种方案在HTML4的标准下可能会出现问题) 方案三： ...
vue项目适配屏幕分辨率与屏幕的缩放适配详细教程
梨子社区
11-14 5841
目录笔记本或者显示器 默认设置125%或者150%缩放，导致布局错乱的解决方法现在很多14寸的笔记本，出厂默认就是150%的显示。导致很多时候我们的项目，自己开发的时候都是按照100%比例来开发的，上线了就会发现这个问题。
react网页适配不同分辨率_前端页面适应不同分辨率
weixin_39983404的博客
12-19 1405
前端开发要考虑到不同分辨率电脑的页面展示问题，在开发者电脑上的界面在用户电脑上打开可能出现很大变形。解决方案主要有：针对不同分辨率用户设置不同的css使用JS/jQuery动态调整使用前端框架简单介绍一下：针对不同分辨率用户设置不同的css(不推荐)即针对不同的分辨率，开发不同的css样式，在界面加载时，先判断用户屏幕分辨率，在应用相应的css相比较，这种方法最复杂，而且如果系统面向大众，需要作很...
vue3.0 PC端自适应不同分辨率电脑
LIangell的博客
01-19 7623
使用rem单位去做页面的适配，先来了解一下什么是rem。rem是CSS3新增的一个相对单位（root em，根em），我们可以通过去设定X rem=Y px（x和y为自定义数值）如图设定1rem=10px 第一步：安装相应的依赖为我们自动将全局的px转换成rem npm i lib-flexible-computer -S npm i px2rem-loader -D npm i postcss-px2rem 第二步：在main.js中引入 import "lib-flexible-computer"
电脑分辨率高，plsql显示太小，怎么设置
Smile yourlife
07-07 6493
新电脑分辨率比较高，装了plsql_developer后，打开发现整个界面的字体菜单非常小，如何设置？效果如下图片 解决方案： 右键->属性->兼容性->更改所有用户的设置->更改高DPI设置->高DPI缩放替代->勾选替代高DPI的缩放行为指定系统(在应用程序，系统，系统增强里选系统） 更改完配置后的效果 注意:可能由于版本原因，改了还是不行的，建议升级到高版本，亲测有效！ ...
IE6中使用position导致页面变形的解决方案(js代码)
10-28
然而，在Internet Explorer 6 (IE6) 这个古老的浏览器版本中，使用`position`属性时常会导致页面变形，给用户带来不愉快的浏览体验。本篇文章将详细介绍这个问题以及如何通过JavaScript来解决。 问题根源： 在IE6中...
基于Android平台的多分辨率解决方案
01-19
正是由于其开放性，没有采用Windows Phone7 类似的硬件限定标准，目前基于Android系统的机型越来越多，一些硬件指标出现了混乱的局面，其中明显的就是屏幕分辨率的问题。如何使开发者的应用程序尽可能多地适应多种...
设置分辨率_windows修改屏幕分辨率_
10-01
修改windows屏幕显示分辨率，方面程序中调用
android多分辨率屏幕自适应解决方案
12-20
多分片率屏幕自适应的原理分析和实现方案，详细分析了layout_weight的原理和应用
C#读取WinCC实时和归档数据
06-21
如何在 C#应用程序中读取 WinCC 变量归档数据，资源来自西门子官网
解放鼠标右键 chrome edge 浏览器 插件
06-21
解放鼠标右键 chrome edge 浏览器 插件 开启开发者模式,拖入扩展管理即可使用
Python实战示例自动办公-20 Python文本数据可视化之“词云”图.zip
06-21
自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图自动办公-20 Python文本数据可视化之“词云”图
Pygments-0.11-py2.5.egg
最新发布
06-21
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
分辨率不同导致表格变形
06-11
分辨率不同可能会导致表格在不同设备上显示的大小不同，从而导致表格变形。这是因为在不同分辨率设备上显示的像素数量不同，可能会导致表格的某些部分被压缩或拉伸，从而导致表格变形。为了避免这种情况，可以使用响应式设计，使表格可以自适应不同分辨率的设备，或者使用固定宽度的表格，以确保表格在不同设备上显示的大小和形状相同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值