您的位置:首页技术文章
文章详情页

javascript - 浏览器缩放大小的实现原理

【字号: 日期:2023-03-01 11:10:07浏览:38作者:猪猪

问题描述

RT,因为个人使用习惯的原因,使用chrome都是把默认缩放比例调成90%的,今天测试一些页面的时候出现了样式错乱的问题,然而在缩放比例为100%的情况下,所有的浏览器测试都正常,并且在低分辨率的电脑上测试也正常,所以萌生了了解缩放原理的想法,查了一些资料后说是更改了html标签的width和height,然而经过实际测试并不是这样的,所以想问问各位大牛,浏览器缩放的原理究竟是什么,谢谢

问题解答

回答1:

我们正常看到的显示的页面一般为设备像素的大小(100%缩放),或者更准确的说是设备像素与css像素为1:1下的场景。当我们缩放屏幕的时候,设备像素不会变化,但css像素会变化。具体的推荐你看这篇博客:https://www.quirksmode.org/mo...

回答2:

html { zoom: 90%}回答3:

CSS 有 zoom 属性,可以控制内容的缩放。浏览器的缩放大概实现方式类似吧。至于错位问题,大部分浏览器对字体都有默认的最小值,当小于最小值后,文字并不会被缩放,导致了内容的折行,从而把布局撑开。

标签: JavaScript
相关文章: