如何在网络浏览器上设置平板电脑设备尺寸

Question

我正在使用 flutter 开发针对特定平板电脑（Galaxy tab A8）优化（从前端布局角度）的 Android 应用程序。

平板电脑的规格为 -
分辨率：1920x1080，16:10 比例（216 ppi 密度）
尺寸：9.72 英寸 x 6.37 英寸

问题是我没有物理平板电脑，而且我的机器功率太低，无法运行模拟器，因此我需要依赖 chrome/web 进行开发。

现在，当我尝试使用 chrome 开发工具并在响应式设置中插入分辨率时，我得到的屏幕比实际设备有更多的空间，因此我无法专门针对该设备进行优化。

我认为设备尺寸与此问题有关，但没有选项可以设置浏览器窗口的尺寸。如何在 chrome 开发工具中设置分辨率以使其与我的设备相匹配。有没有换算系数？

Answer 1

1. 打开 Chrome 浏览器的开发者工具，按 Ctrl+Shift+I 或 右键单击任意页面并选择检查。
2. 按 Ctrl+Shift+M 打开设备工具栏，您将在下拉列表中看到可用的设备列表。在设备列表的末尾，有选项编辑。点击它。
3. 从右侧，您将打开设备的“设置”菜单 -> 选择设备选项
4. 然后单击“添加自定义设备”。
5. 然后填写以下表格详细信息，添加新设备，在这里您可以给出名称，尺寸和密度。
6. 下次当您需要使用此新设备测试网站时，只需右键单击或按 Ctrl+Shift+I 选择检查，然后选择设备工具栏并选择新添加的设备。