浏览器如何模拟测试不同分辨率的网页效果

发布时间：2024-01-04 栏目：使用技巧浏览：分类：

我们在做响应式开发时，需要兼容不同分辨率的网页，这时候就需要支持不同分辨率的设备来测试预览。使用不同分辨率的种类太多，我们不可能有那么多的设备，该如何测试了？

这时候我们就需要用到浏览器自带的模拟测试不同分辨率的功能，菜鸡源码以360计算浏览器为例，当然其他浏览器都支持这个功能，操作方法也基本相同。

浏览器模拟分辨率操作方法

浏览器f12打开控制台，点击设备图标，开启模拟，我们还可以选择不同分辨率和不同设备来切换分辨率。

浏览器如何模拟测试不同分辨率的网页效果

当然，我们还可以自定义不同分辨率，点击“编辑”，添加自定义设备，随便取个名字，然后输入需要自定义分辨率的宽和高，添加即可。

浏览器如何模拟测试不同分辨率的网页效果

然后是手机分辨率，记得选择移动设备，否则有些网站不会作出手机端的自适应或触屏效果。