以下simple fiddle shows a list box with the set of country names。在PC上，height属性告诉页面呈现列表框而不是下拉列表，因此n项目是可见的。在移动设备（iPad/iPhone）上，高度属性似乎告诉页面下拉控件应该有多高（如你所期望的那样，它看起来很荒谬）。手机上的HTML/CSS列表框
我的CSS类如下所示：
.sliderlist {
width: 240px;
height: 620px;
font-size: 12px;
font-family: "Verdana", Geneva, sans-serif;
}
我想在网页，PC或移动，而不是一个下拉上列表框。我怎样才能做到这一点与HTML/CSS？
为了澄清我的意思，下面是从我的名单看起来像iPad的照片（这只是一个下拉，其高度由高度属性给出）：
并在PC上使用相同的代码我们有一个列表框，而不是一个下拉列表。我想太多移动后者：
您可以使用媒体查询为移动设备和桌面单独编写类。
/*用于笔记本电脑的屏幕*/
@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;
}
}
'高度：auto'为什么不呢？ – odedta
我不想要一个下拉菜单，我想要一个包含n个项目的列表框。这是Chrome中PC上的行为。这不是iPad和iPhone上Safari的行为。 – Robinson
是的，我知道，'