html – Chrome DevTools无法使用Select元素

2019年7月20日 227次阅读

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

我的问题是,当我使用DevTools时,< select>元素的扩展部分(通常下降的部分)完全偏离中心并显示为黑盒子.

起初我觉得这个样式有点不对劲,但是我创建了新的.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>

以下是问题的屏幕截图：《html – Chrome DevTools无法使用Select元素》

最佳答案 出于测试目的,您可以将设备类型从移动设备更改为桌面设备(触摸).这将允许您解决选择元素和移动仿真的问题.

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

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

为了节省必须这样做,您可以创建自定义设备配置文件

>在第一个下拉列表中选择编辑然后添加自定义设备
>注意：只有在您已经创建了自定义设备类型时才会显示编辑,请参阅下面的编辑,了解如何首次创建自定义设备.

《html – Chrome DevTools无法使用Select元素》

《html – Chrome DevTools无法使用Select元素》

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

>导航到要测试的页面,然后按F12打开开发人员工具
《html – Chrome DevTools无法使用Select元素》
>按F1键打开开发人员工具设置
《html – Chrome DevTools无法使用Select元素》
>在设置菜单中选择设备
>添加一个自定义设备,其配置详细信息与您要测试的设备相同,并按上述方法执行.

点赞