手机上的HTML/CSS列表框 [英] HTML/CSS list box on mobile

问题描述

以下简单的小提琴显示了一个列表框，其中包含一组国家/地区名称.在PC上，height属性告诉页面呈现一个列表框而不是一个下拉列表，因此 n 个项目可见.在移动设备(iPad/iPhone)上，height属性似乎可以告诉页面下拉控件的高度(它看起来像您期望的那样可笑).

The following simple fiddle shows a list box with the set of country names. On a PC the height property tells the page to render a list box instead of a drop-down, and consequently n items are visible. On mobile (iPad/iPhone), the height property seems to tell the page how high the drop down control should be (it looks ridiculous as you'd expect).

我的CSS类如下:

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

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

I would like a list box on the page, PC or mobile, not a drop-down. How can I do this with HTML/CSS?

为弄清我的意思，以下是iPad上这张列表的照片(只是一个下拉列表，其高度由height属性给出):

To clarify what I mean, the following is a photo from my iPad of what the list looks like (it's just a drop down, the height of which is given by the height property):

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

and on the PC with the same code we have a list box, not a drop-down. I want this latter on mobile too:

推荐答案

以下内容将为您带来预期的结果

Here is something that will give you results as you expect jsbin. For some unknown reason safari does not cares about the size parameter of the select option, thus we use jquery to get it done. This is the result I got on Iphone 4.

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

Also to get appropriate zoom levels you must include the following in the header section of the page the following code.

请尝试在页面的头部添加以下代码行.更多信息此处

Try including the following line of code in head section of your page. More info here

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

这篇关于手机上的HTML/CSS列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！