HTML/CSS 移动设备上的列表框

Question

以下simple fiddle shows a list box with the set of country names。在 PC 上，高度属性告诉页面呈现列表框而不是下拉列表，因此 n 项是可见的。在移动设备上 (iPad/iPhone)，高度属性似乎告诉页面下拉控件应该有多高（如您所料，它看起来很荒谬）。

我的 CSS class 看起来像这样：

.sliderlist {
    width: 240px;
    height: 620px;
    font-size: 12px;
    font-family: "Verdana", Geneva, sans-serif;
}

我想要页面上的列表框，PC 或移动设备，而不是下拉列表。我怎样才能用 HTML/CSS 做到这一点？

为了阐明我的意思，以下是我 iPad 的列表外观照片（它只是一个下拉列表，其高度由高度属性给出):

并且在具有相同代码的 PC 上，我们有一个列表框，而不是下拉列表。我也想在手机上使用后者：

Answer 1

这样试试：Demo

.sliderlist {
    width: 240px;   
    height:94vh; /* newly added*/
    font-size: 12px;
    font-family: "Verdana", Geneva, sans-serif;
}

Answer 2

这里有一些东西可以给您带来预期的结果 jsbin。由于某些未知原因，safari 不关心 select 选项的大小参数，因此我们使用 jquery 来完成它。这是我在 Iphone 4.

上得到的结果

此外，要获得适当的缩放级别，您必须在页面的 header 部分包含以下代码。

尝试在页面的标头部分包含以下代码行。更多信息 here

<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">

Answer 3

您可以使用媒体查询为移动设备和桌面设备编写单独的 class。

/*笔记本电脑屏幕*/

 @media screen 
      and (min-device-width: 1200px) 
      and (max-device-width: 1600px) 
      and (-webkit-min-device-pixel-ratio: 1) {
        .sliderlist {
          width: 240px;
          height: 300px;
          font-size: 12px;
          font-family: "Verdana", Geneva, sans-serif;
        }
    }

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .sliderlist {
      width: 150px;
      height: 100px;
      font-size: 12px;
      font-family: "Verdana", Geneva, sans-serif;
    }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .sliderlist {
      width: 240px;
      height: 300px;
      font-size: 12px;
      font-family: "Verdana", Geneva, sans-serif;
    }

}

HTML/CSS 移动设备上的列表框

HTML/CSS list box on mobile

javascript

css

html-lists