|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > 网站看起来比例失调,页面好像被放大了,是不是分辨率的问题?
网站看起来比例失调,页面好像被放大了,是不是分辨率的问题?

网站看起来比例失调,页面好像被放大了,是不是分辨率的问题?

日期:2021-07-27 浏览量:526 原创作者:湖八爷
昨天晚上失眠了,打开知乎看到有人邀请我回答问题,这是一个和浏览器兼容相关的问题,刚好之前有遇到过,就顺手回答了一下,今天整理一下发到博客上来。

一,楼主的问题介绍。


1:问题的标题是:找网络公司开发了一个网站,一直觉得好像分辨率有问题,但对方公司不承认,有高手给看看是什么问题吗?


2:问题的描述是:找网络公司开发了一个网站,UI设计什么的都满意了,但是网站出来以后觉得比例失调,感觉页面太大了,好像分辨率有问题,但是对方公司不承认,说就是按UI来的,说没法改,可是这个页面在我电脑上看傻大傻大的,就是感觉显示比例太大,有高手能帮忙看看这是什么问题吗?



二,以下是我的回答。


这个问题是现阶段很多开发者会遇到的一个很常见的问题。


但并不是分辨率的问题,因为UI设计师在设计页面的时候是按照1920px * 1080px去设计的,所以和分辨率没有关系。


这是一个前端兼容性问题,也可以说是一个DPI适配的问题。出现这个问题的根本原因是笔记本电脑和台式机显示器默认的显示设置不一致导致的一个问题。


一般网络开发公司给员工配置的都是台式机+显示器的办公条件,这个情况,显示器的分辨率一般是1920px * 1080px,默认的显示设置是100%,所以UI设计师按照这个分辨率去设计页面是没有问题的,然后交给前端程序员去开发,他也是在同样的配置条件下工作,开发完以后查看也是没有问题的。


问题就出在对方可能没有专业的测试工程师,或者测试人员测试的不够仔细,以至于根本没用笔记本电脑去测试一下这个网站,觉得只要功能上没问题,就可以交付给你验收了。


然后到了你这边,你使用的是笔记本电脑,虽然现在笔记本电脑的分辨率也是1920px * 1080px,但是现在很多笔记本电脑的显示设置默认是125%,或者150%,这就会导致电脑桌面,应用软件,包括浏览器都会被相应的放大,从而导致你的网站页面也被放大了。页面放大,会导致图片等元素出现模糊的现象,所以你会怀疑是不是分辨率的问题。


笔记本电脑默认DPI放大125百分比.png


比如我刚刚看到这个问题的时候,用的是一台Windows10系统的笔记本电脑,分辨率为1920px * 1080px,但显示设置为125%,所以进入你的网站后效果如下图:


没有做适配前的效果.png


从上图看,你的网站页面明显是被放大了,所以页面看起来会很模糊,大多数非专业人士就会和你一样认为是分辨率的问题。


但其实是因为前端程序员没有做DPI适配才会出现的一个问题,你和对方反馈一下就行了,或者把我的这个回答丢给对方看,对方的程序员自然就懂了。如果我写的这么详细还是不懂,那你可以考虑换一家网站开发公司了,比如我的公司,O(∩_∩)O哈哈~


下面这个截图是我在你的网站中添加了适配代码后页面展示的效果截图,明显就比之前清晰多了。


添加了适配代码后页面展示的效果.png


不过我这边仅仅是在我的客户端添加了代码,所以只有我能看到这种效果,想要所有用户都看到这种正常的展示效果,需要对方的程序员把适配代码更新到服务器上才行(不要误会我更改了你的网站代码)。



三,另外,除了上面这个DPI适配的问题,我发现你的网站还存在以下几个问题。


1:没有favicon.ico图标。


2:网站底部没有备案号,这个是不符合官网规范的。


3:网站里面的图片没有压缩,导致网站不仅加载很慢,还浪费用户流量。


4:是不是没做移动端官网?现在移动端才是主流,做官网不做移动端?不是很理解。


5:网站前端编码很多地方没有考虑SEO优化工作,是不打算做SEO优化吗?如果后续需要做SEO优化,建议前期先把SEO需要注意的地方更改过来,避免以后频繁改动导致被K站。