Question

我正在为网站修复移动设备的样式表，我正在使用Chrome内置的DevTools进行测试。我现在在Windows操作系统上使用Chrome版本53.0.2785.116。

我的问题是，当我使用DevTools时，<select>元素＆＃39;扩展部分（通常掉落的部分）完全偏离中心并显示为黑盒子。

起初我觉得这个样式有些不对劲，但我创建了新的.html文件，只是在页面中添加了一个<select>元素并找到了同样的东西。

我意识到在实际设备上下拉部分的显示方式不同（作为设备底部的一个部分，带有Rolodex类型动画中的选项）;但是，我无法使用选择菜单进行测试......

有没有解决这个问题的方法？

这是我的代码：

<!DOCTYPE html>
<html>
<title></title>
<head>
</head>
<body>
    <select>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
        <option>e</option>
    </select>
</body>
</html>

以下是问题的屏幕截图：

Answer 1

出于测试目的，您可以将设备类型从移动设备更改为桌面设备（触摸）。这样您就可以使用select元素和移动模拟解决问题。

要启用这些选项，请通过修正和检查您所在页面或按f12打开您的开发人员工具。单击旋转图标右侧的菜单图标（3个点）（右上方的菜单图标） - 编辑：查看以红色圈出的图像点。

选择显示设备类型和显示设备像素比率
从第一个下拉列表中选择响应并输入您的其他设备值

为了节省必须执行此操作，您可以创建自定义设备配置文件

在第一个下拉列表中选择修改，然后添加自定义设备
注意：仅当您已创建自定义设备类型时才会显示修改，请参阅下面的修改，了解如何首次创建自定义设备。< / LI>

修改对于适用于Windows的Chrome版本53.0.2785.143，您可以采取以下步骤来完成添加自定义设备类型：

导航到要测试的页面，然后按F12打开开发人员工具

点击F1以打开开发人员工具设置

在设置菜单中选择设备

添加一个自定义设备，其配置详细信息与您要测试的设备相同，并按上述方式执行。

Chrome DevTools无法使用Select元素

1 个答案: