本地页面样式显示正常，别的电脑样式不正常

最新推荐文章于 2024-09-09 20:11:58 发布
最新推荐文章于 2024-09-09 20:11:58 发布
阅读量443 收藏 6
点赞数 9
文章标签： css 页面缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44689966/article/details/135404065
版权
文章描述了在Windows11系统下，不同电脑的页面显示问题可能与浏览器缩放有关。通过检查`window.devicePixelRatio`和确保图片缩放比例正确，可以解决样式不正常的问题。
摘要由CSDN通过智能技术生成

问题

本地页面显示正常，但是另一台电脑页面显示不正常，通过测试发现，我在浏览器中设置缩放为110%才会出现相同的样式不正常的问题（另一台电脑缩放100%就会出现相同问题）
在这里插入图片描述
但是两台电脑系统都是win11,查看屏幕分辨率和缩放都相同在这里插入图片描述

解决

在控制台输入window.devicePixelRatio如果出现的不是1，就说明被缩放了
在这里插入图片描述

看看上面两张图片是不是100%，如果是的话，接着检查一下在这里插入图片描述
调整一下即可

weixin_44689966
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html在不同电脑上排版不一样怎么办_认识html：实现网站页面是这么简单的一回事...
weixin_39892615的博客
10-28 1802
互联网时代人们通过上网浏览信息，打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息，一系列信息反馈和视觉冲击之后，您有没有想过，互联网这么发达的时代，您觉得花一点点时间学会做个网站页面不真香？概念须知：超文本标记语言“超文本标记语言“(HTML)作为文档信息载体。当我们用html创建文档时，它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互，需要一套编...
win7系统卸载完WPS后，office2007图标显示不正常，及每次打开都要进行配置的问题的解决方案
weixin_45008995的博客
08-18 2623
1、按键盘上的 Windows 徽标健+ R 键，输入 regedit，按回车键。（若弹出用户账户控制窗口，请允许以继续） 2、对于 Word 2007/Word 2010，请找到以下六个键值。（然后分别右击选择“导出”，把键值备份至桌面。一旦发生问题，可以通过备份来恢复注册表键值），找到后并删除。 ①HKEY_CLASSES_ROOT.doc ②HKEY_CLASSES_ROOT.docx ③H...
项目发布到各个电脑上，css样式都变了，jsp页面布局乱了，怎么处理
信徒博客
10-17 3334
2018/11/14年第二次修改这个博客： 要想项目自适应所有的浏览器和各种分辨率的电脑，强力推荐一个功能强大的前端框架BootStrap 因为如果是设置百分比不是像素的话，虽然是对的，但是人工的百分比设置，很费时间，费力； 因为许多东西在一个电脑上、三四个电脑上看着没问题，但是到了实践情况，又会发生页面布局乱了的情况，所以强力推荐前端框架bootstrap 1.在做项目开始的时候，布...
内容总是错位，不同设备上显示不一致，这篇就可以榜你解决
(黎子)人生编码
06-20 720
CSS弹性盒子（Flexbox）是一种强大的布局模式，它提供了一种更加高效和灵活的方式来在网页上排列元素。与传统的布局方式相比，Flexbox能够更好地适应不同屏幕尺寸和方向，为现代网页设计带来了革命性的变化。
同一个浏览器内看同一个页面，本地启动的和部署在服务器上的样式不同
qq_23260455的博客
10-13 1383
vue +elementui，引用了menu组件，本地运行的时候是好的，但是部署上去后样式出现差错，首先排除兼容模式的问题。 检查线上线下的样式文件是否一致，能看到有不一样的样式。因为我有修改原生组件的样式，所以去源代码查看也没有找出问题，后来百度到这篇文章，谢谢~Element-ui升级2.0后初体验 小结： 本地启动和服务器启动排除项目部署本身的不同问题之外会出现资源加载顺序的问题。 部署在本地的时候资源加载速度比较快基本不会出现资源加载先后顺序的问题，但是部署在服务器上面就需要网络请求所有的资源，这
前端与后端进行数据交换
qq_52324490的博客
12-07 566
controller层 @Controller @RequestMapping("/***") public class A{ @RequestMapping("/***") } 在controller层中，通过类映射+方法映射来唯一锁定一个方法 每一个映射的方法，方法名不在重要，因为通过map来定位 映射的方法可以返回HTML，也可以返回数据 当返回值的时候，js可以通过ajax等交互方式来进行通信，ajax请求的url的定位就是通过类map+方法map的方式定位 当返回HTML的时候，在浏览器可以
如何避免自己的HTML网页在别人电脑上变形
qq_52006379的博客
08-12 2450
如何避免自己的网页在别人电脑上变形
html加载电脑本地图片不显示不出来,UIWebView加载本地html文件，不显示资源图片，不加载css样式...
weixin_42103587的博客
06-08 576
项目中需要加载本地的html，在添加到工程中时，发现不显示本地的资源图片文件，而且样式也跟浏览器打开的不一样。初步判断是资源路径读取的问题。鉴于iOS沙盒机制的问题，这些资源文件在编译过程中，都被保存到同一资源路径下了。所以就需要我们修改html中图片资源的读取位置。如本地html中有如下代码图片不显示src="images/icbcImg2.png" />就需要修改为：src="icbcI...
微信小程序-weui导入报错和部分样式不显示问题
qq_39640321的博客
08-14 2686
文章目录导入weui.wxss出现的问题weui.wxss部分样式不显示问题 Demo采用了npm导入包的方式，虽然会占用包体积，但是版本稳定，利于操作。 导入weui.wxss出现的问题 解决方法: 拷贝/miniprogram/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style中的weui.wxss放在miniprogram文件夹下，在全局的app.wxss中导入@import 'weui.wxss';即可 Demo代码采用了 [官网CellDe
新疆旅游网站页面样式设计
09-18
在设计一个新疆旅游网站的页面样式时，HTML5起着至关重要的作用。HTML5是超文本标记语言的最新版本，它不仅增强了网页的结构化能力，还提供了丰富的媒体支持和更好的移动设备兼容性，这对于创建引人入胜、互动性强且...
256国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
例如，CSS媒体查询可以检测设备的宽度并应用相应的样式规则，使得在手机和平板上也能正常显示。 3. JavaScript（JS效果）：JavaScript是一种强大的编程语言，负责网页的动态交互。在移动端前端，JS可以实现各种效果...
198国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip
08-03
标题中的“198国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip”表明这是一个包含198个不同资源的压缩包，这些资源主要是针对手机和电脑的HTML网站源码，前端JavaScript特效，以及...
HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题
热门推荐
caimaomaocai的博客
07-17 1万+
版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85336448 表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等） 举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。 问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。 参考资料：百度...
HTML、CSS实现树状图
p_s_p的博客
09-09 233
【代码】HTML、CSS实现树状图。
CSS学习16--CSS高级技巧：用户界面样式、精灵技术、字体图标、滑动门
最新发布
qq_54641174的博客
09-09 733
CSS用户界面样式-鼠标样式、轮廓、垂直对齐、溢出文字隐藏
css之雪碧图（精灵图）
qq_55961367的博客
09-02 715
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
【CSS in Depth 2 精译_025】4.3 弹性布局的方向
PeacefulWinter的博客
09-09 1630
本篇为新版《CSS in Depth》4.3小节内容，主要介绍了 Flexbox 弹性布局的方向设置，并结合一个典型的两列布局案例，对垂直方向的弹性布局做了进一步讨论，最后还对表单元素的细节样式问题进行了讨论，这些都是平时容易忽略的非常有价值的知识点，建议收藏并在本地实测。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3716
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
vue从电脑本地选取图片
03-25
在Vue中，我们可以通过以下几个步骤从电脑本地选取图片： 1. 在Vue的模板中添加一个input标签 ```html <template> <div> <input type="file" @change="handleImageUpload" /> <img :src="imageUrl" /> </div> </template> ``` 2. 在Vue的script中定义handleImageUpload方法并处理上传图片的逻辑 ```javascript <script> export default { data() { return { imageUrl: '' // 用于存储上传完成后的图片链接 } }, methods: { handleImageUpload(event) { const file = event.target.files[0] // 获取上传的文件 const reader = new FileReader() // 创建文件读取对象 reader.onload = (e) => { this.imageUrl = e.target.result // 设置图片链接 } reader.readAsDataURL(file) // 读取文件并处理为Data URL } } } </script> ``` 3. 在Vue中添加样式美化上传按钮 ```html <template> <div> <label class="custom-file-upload"> <input type="file" @change="handleImageUpload" /> Choose File </label> <img :src="imageUrl" /> </div> </template> <style> .custom-file-upload{ display: inline-block; padding: 6px 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; } </style> ``` 通过这些步骤，我们就可以在Vue中实现从电脑本地选取图片并显示在页面上的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值