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

Question

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

我的 CSS 类如下所示：

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

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

为了澄清我的意思，下面是我 iPad 上的一张照片，显示了列表的样子（它只是一个下拉列表，其高度由 height 属性给出）：

在具有相同代码的 PC 上，我们有一个列表框，而不是下拉列表。我也想要后者在移动设备上：

Answer 1

这里有一些东西会给你带来你所期望的结果jsbin。由于某些未知的原因，safari 并不关心 select 选项的 size 参数，因此我们使用 jquery 来完成它。这是我在 Iphone 4 上得到的结果。

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

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

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

Answer 2

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

/*适用于笔记本电脑屏幕*/

 @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;
    }

}

Answer 3

试试这样：Demo

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