关于vue项目在不同电脑上页面不正常显示问题

最新推荐文章于 2024-04-24 16:28:58 发布
最新推荐文章于 2024-04-24 16:28:58 发布
阅读量1.4k 收藏 8
点赞数 3
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanwu666/article/details/129625980
版权

关于vue项目在不同电脑上页面不正常显示问题
在这里插入图片描述
我的电脑缩放比例是150%，而另一台电脑的缩放比例是100%，这就导致了我写的vue项目前端显示方面两台电脑有出入。网上搜索了半天，也没有解决。最终发现对于这样的问题很简单。
解决方法：更改public/index.html文件

<body style="zoom: 1.5;">

因为我的是150%->100%,所以要放大1.5倍。
如果是100%->150%或100%->125% 要相应的缩小。

小白求知之路
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在idea测试vue是否能运行
12-29
如果一切正常，你应该能看到Vue项目模板的默认页面。 对于测试Vue项目，Vue CLI生成的项目已经集成了Jest作为单元测试框架。你可以在`tests/unit`目录下找到示例测试用例。编写测试用例，运行： ``` npm run test:...
详解Vue webapp项目通过HBulider打包原生APP
08-27
确保你的Vue项目在手机上显示正常，如果遇到白屏问题，检查`config/index.js`中的`build`模块，特别是`assetsPublicPath`的配置。默认情况下，Vue项目可能会将其设置为'/'，但你的`index.html`和`static`目录位于...
解决vue不同屏幕自适应的问题
zbzcode的博客
06-06 2128
和队友电脑型号不同，合并代码时会出现写好的表现良好的页面到了队友电脑上错乱的情况这是受分辨率影响的需要px转换为rem，网上有说载入load数组的但步骤繁琐且易错。 多方实验解决方案如下 首先我们需要要安装一些依赖 1. npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小 2. npm i px2rem-loader -D//自动将px转换为rem 3. npm i postcss-px2rem//将代码中px自动转化成对应的rem的一
VUE 响应式布局-根据浏览器宽度展示不同的css样式
m0_51079637的博客
10-28 5638
“自己写的前端页面只能适配自己电脑，一旦再他人电脑上打开布局全乱” 就这个问题已经困扰我许久，尤其是当我在手机上打开时尤为明显话不多说，上图！ 很正常的模样是吧？看手机效果 那一瞬间，我觉得我是个fw(法王) 终于在我的不懈努力下，终于实现了动态的页面效果！ 如下图： 虽然还有些问题，但是！我觉的问题不大 主要用到的就是elementui中布局的响应式属性： 以及css3的响应式布局 @media 首先来说elementui布局的响应式属性 elementUi将一行划分成24块，可以通过使用e
前端页面Mac和Windows系统展示不一样原因
最新发布
xxx
04-24 334
需要统一设置fontFamily字体。
Vue3 解决电脑分辨率及缩放导致页面变形的问题
Tsinbo1314的博客
12-20 9308
Vue3 解决电脑分辨率不同导致的页面变形问题前言新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 最近在做一个项目，突然发现由于调整电脑的分辨率导致页面变形的问题。正常电脑显示的是100%，当调整电脑分辨率至125%
前端开发中常见的浏览器兼容性问题及解决方案
qq_39715380的博客
05-17 5236
浏览器兼容性问题
页面跳转样进入页面样式混乱错位但是刷新页面后又好了
WebDestiny的博客
09-04 5615
原因：要是同样的样式，前面已经加载过了，浏览器在跳到下个页面相同的样式就不会再重新加载了。在起名的时候可以自行区分，也可以根据官网的提示，在页面的style中加上scoped <style scoped></style>这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，也就是给你定义的名字前加一串哈...
vue等比例缩放网页，在手机QQ，微信浏览器样式错乱问题
yqlnihao的博客
11-21 654
/在头部加meta标签。
解决vue项目F5刷新mounted里的函数不执行问题
12-13
在主文件index.vue中初始化页面相关的操作， 在mounted中放置用户权限判断并更新store中的权限值，当点击相应组件时mounted可正常工作， 但是在用户手动刷新时mounted内的函数并未执行，导致相应组件未获取到权限而...
vue-cli启动本地服务局域网不能访问的原因分析
01-19
 本地vue-cli启动了一个项目只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问...
通过实例解析chrome如何在mac环境中安装vue-devtools插件
11-19
完成上述步骤后，重启Vue项目，你应该能在Chrome的开发者工具中看到Vue DevTools，并能正常进行调试。通过Vue DevTools，开发者可以轻松地检查Vue实例的状态，查看组件层级，以及实时修改数据，极大地提高了Vue项目...
vue el-dialog鼠标拖拽实现大小控制，拖拽移动位置
weixin_41463944的博客
12-09 1771
1、分装成js import Vue from 'vue'; Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { //弹框可拉伸最小宽高 let minWidth = 400; let minHeight = 300; //初始非全屏 let isFullScreen = false; //当前宽高 let nowWidth = 0; let now
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
weixin_40444253的博客
08-13 827
vue2根据不同的电脑分辨率显示页面内容及不同设备适配显示
3.1、public公共样式
weixin_44195250的博客
09-27 328
public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
【vue2 】页面在放大缩小页面下显示问题的处理
小钿钿不忘初心的博客
05-17 1022
在开发中写好了页面，但是没有针对windows设定的放大缩小文本比例来做兼容，故在非100%比例下显示有问题。
SpringBoot+Vue+maven打成jar包部署服务器，不显示前端页面。
qq_51742972的博客
03-16 3323
springBoot+vue打jar包部署访问不到前端页面，只能调用后端接口
【项目经验】：vue的PC端项目中通过vw做页面自适应，改变屏幕分辨率后页面混乱
weixin_70245286的博客
08-21 724
vue的PC端项目中通过vw做页面自适应，改变屏幕分辨率后页面混乱的解决方法
vue项目页面显示完了进度条还在
06-09
这个问题可能是因为你在页面加载完毕之后没有及时隐藏进度条。你可以在页面加载完毕后使用JavaScript代码隐藏进度条。具体来说，你可以在Vue的`mounted()`生命周期钩子函数中添加以下代码： ```javascript document.getElementById('progress-bar').style.display = 'none'; ``` 其中，`'progress-bar'`是你进度条的元素ID，你需要将其替换为你实际使用的元素ID。这样，页面加载完毕后就会隐藏进度条了。如果还有问题，可以提供更多的代码和页面结构信息，我将尽力帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值