前端开发快速调整/保留常用浏览器尺寸(手机/pc端通用) 您所在的位置:网站首页 snapchat怎么调尺寸 前端开发快速调整/保留常用浏览器尺寸(手机/pc端通用)

前端开发快速调整/保留常用浏览器尺寸(手机/pc端通用)

2024-07-11 03:05| 来源: 网络整理| 查看: 265

1. 本文适用问题与痛点: 1.1 在浏览器快速切换各种非默认尺寸 1.2 所需测试的浏览器尺寸大于你的屏幕分辨率 2. 通过控制台调整自定义尺寸(本文都以chrome浏览器为例)

按【F12】调出控制台,点击下图1处调整控制台显示的方位,在手机端页面开发的时候,本人习惯选择最右的,在屏幕右侧显示控制台。

点击下图3处图标或Ctrl + Shift + M调出自定义模式

设计人员常用的尺寸是iPhone 6/7/8(375 * 667) 和 iPhone X(375 * 812)

自定义的话点击最下方【Edit...】调出设置面板

在设计面板中点击【Add custom device...】,在下拉框中设置方案名称、宽度、高度、设备像素比(不常用),点击【Add】保存即可

添加成功后即可在之前的下拉列表中找到,做到快速切换。

另外,右上角的屏幕旋转按钮可以切换当前分辨率的宽高比

通过该方式,不只能模拟手机尺寸,也可以模拟大于当前屏幕宽高的尺寸,例如iMac的5120*2880,只不过是比例会有差别,比例不是100%的时候也不会影响模拟的设备宽高,见下图控制台打印部分。

通过这种方式可以测试不同尺寸浏览器出现的bug~



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有