页面缩放引起得错乱问题



先介绍下背景,红框里面的文字,研发在1920和1366分辨率下面调试没有任何问题,然后提测到测试部,测试部的人个个都是魔术师,是真的佩服,把用户的智商按在地上摩擦,想吐槽但是辩解是苍白无力的,测试还是很有必要,很牛的,哦哦,我给自己加的戏有点多了,回归正题,接到禅道上的这个问题,我们底层研发,不,是我这个菜鸟前端肯定是要在我普普通通的电脑上进行页面定位,将问题复现,然后解决,为啥说我的电脑普通,用为我是正常的转换1366分辨率,然后调试,发现是没问题的,问题复现不了,抱着侥幸心理找测试,希望少个bug,嘻嘻,首先让测试在我普普通通的电脑上看,我普普通通的电脑还真没有,,测试说那你看我会变魔术的电脑,当然,测试不是这样说,测试说那你在我电脑上演示,然后我就做到了测试的座位上,去定位页面,心里慌慌的,嘿,还真有,这就尴尬了,我可是没见过大风大浪的人哪,但是要稳住,别慌,按下F12键,我们来排查,因为在人家电脑上,其他模块的页面是正常的,但是这个模块的页面它是乱的,我第一反应是照着那个正常的页面来改呀,没毛病吧,我可真是个小机灵鬼呢,对比发现页面代码一模一样,这不就刚尴尬了吗,嗯,继续淡定,后来研发经理提议要不要换个浏览器试一下,果然换到火狐就没有任何问题,嗯,是浏览器的问题,研发经理看出了我的尴尬可能,然后自己悄悄地回到了座位上,我呢继续淡定的看页面,它这谷歌浏览器上电脑1366的页面可比我电脑上的页面大多了,排查下是不是页面缩放了,这时研发经理他带着解决方案走来了,过来调了下它浏览器模式,好家伙,不仅缩放,还把字体调成特大,调成正常的之后页面就正常了,当然我们给测试说可能是浏览器怕你看不清,然后从1920到1366时自适应将字体变大了,不等测试反应我们开心的说又少一个bug然后转头就走,留下迷茫的测试和内心同样一头雾水的我们。不一会测试就追上来了,问:那为什么同样的情况下,其他页面是正常的,这个页面是这样的??我们内心os,我们也想知道!!然后研发经理说不影响客户正常使用就可以了,测试准备拎着我去她们那继续测,研发经理说我们可忙了,摆手示意我坐下,对测试说你赶紧继续测吧,不影响客户使用就行了,测试不死心的问出,我想知道为啥呀,研发经理绷不住了,说我也想知道,哈哈

好了,这个问题继续由我来为大家揭秘~

我还是觉得代码有问题,在后台打开页面对比,发现也没啥问题哈,然后页面中进行排查,反复的检查了几次,写的代码是一模一样的,引用的样式也是一模一样的,最终发现正常的页面里面有个font-size:16px的设置,在不正常的页面里也有,但是他被一条横线去掉了,继续排查,在正常的页面里,有个table它的user agent stylesheet,这里面的内容也就两三条,但是不正常的页面就有很多,这个问题就是要去除这个浏览器自带的样式,要将table样式重设,最终加上table:{font-size:100%;font:inhert;}重设一下样式,

上面一大堆废话,现在梳理一下:

  • 第一检查浏览器是否被缩放了,文字是否是特大号
  • 以上排除之后检查代码样式,有时候是浏览器自带的样式在作怪,这时自己重新设置一下样式就好了,就酱紫
原文地址:https://www.cnblogs.com/wszzj/p/14208873.html