Question

这是我在Chrome设备模式中使用的代码选择选项列表溢出设备宽度我不会在真实设备中使用它而且我在此处附上我的屏幕截图

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form role="form">
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>

    </div>
  </form>
</div>

</body>
</html>

＆＃13;

Answer 1

不，这将显示在您的设备中。选项列表项溢出这是因为OS（窗口）。如果您在其他浏览器中测试它。它将使用默认属性执行diffident（意味着如果不使用css或js进行自定义）。

如果你在Android上看到它就可以了，在iPhone上它会显示iphone默认选项框。

Answer 2

你实际上并没有提出任何问题，只是说明了Chrome的用途......我不确定这个网站是如何适应的，但无论如何：

您的代码没有任何问题，这就是设计模式的行为方式，以便在您的下拉列表中显示完整的选项。

在真实设备上，它将在iOS中本地显示，或者以视口宽度显示。

Chrome设备模式中的设计问题

2 个答案: