浏览器内部是如何处理自带的缩放功能?

我发现有些网站

例如人人都是产品经理,iview的官网

图片描述
图片描述

在放大之后都出现了排版错位,而我们通常的放大应该要让整个网页全屏放大,而不是在限制视口宽度的情况下来放大啊,为什么浏览器都是采取后者方式放大呢?

缩小也一样有类似的情况

图片描述

例如这个网页在缩小之后,font-size并没有按比例同步缩小,导致标题文字重叠了,为什么浏览器的开发者不按照缩小比例,把font-size也跟着等比缩小呢?这其中有什么奥秘吗?

图片描述

不过也有部分网站是全屏放大,并不是视口放大,比如说csdn

图片描述

csdn的缩小同样存在类似问题

csdn是如何做到的呢?对于平板电脑来说肯定全屏放大的效果会好很多,如果需要达到完美的缩放效果,在写css的时候有什么需要注意的地方吗?

阅读 2k
2 个回答
新手上路,请多包涵

浏览器的放大缩小就是正常理解的样子,正常考虑开发移动端的话 html 需要设置 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

回答一下题主看的几个页面

1、页面放大出现排版错位:可以查看相关网站错乱的原因,一般是开发者设置 width:100%; 或100vw等操作,导致内容盒子被放大,外部盒子没滚动条所以会错位。

2、页面缩小字体没有缩小,可能是开发者设置的 rem 进行设置单位,最外面盒子可能有一个最大 width。

3、浏览器开发工具也可以放大缩小,鼠标在开发工具上然后 ctrl + 滚轮

题主考虑移动端开发可以进行响应式开发,使用 rem | 百分比 | media 等都可以实现。

你怕是对缩放理解有误

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题