Javascript 手机上的HTML/CSS列表框

下面。在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上，我们有一个列表框，而不是下拉列表。我也希望在手机上使用后者：

像这样试试：

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

---

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

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

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

---

您可以使用媒体查询为手机和桌面编写单独的类

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

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

}

---

height:auto

为什么不呢？我不想要下拉列表，我想要一个有n个可见项的列表框。这是Chrome在PC上的行为。这不是Safari在iPad和iPhone上的行为。是的，我知道，将

标记变成列表框的是使用

大小

属性。根本不需要height属性，请尝试：

auto

，

0

，完全不需要height，

vh

单位，如答案中建议的单位。如果您想要某种列表框，而不是经典的下拉列表，您是否考虑过使用bootstrap？（虽然需要JS）不需要。这只是移动设备上的一个很长的下拉列表。您期望的输出是什么？我希望移动设备的输出看起来像PC的输出。也就是说，一个包含n个可见项的列表框。在电脑上有一个滚动条。在手机上不需要滚动条，因为我想你可以滑动列表。

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

}