尺寸不适用于移动设备中的选择选项

Question

在PC上查看时，以下代码显示所有四个选项。没关系！

但是，在移动设备上查看时，仅显示默认选项。这是实际问题。

注意：如果我省略size="4"，则PC上的输出与上述移动设备上的输出相同。似乎size="4"不适用于移动设备。

请如何解决此问题。

.myClass select 
{
    width: 150px;
    height: 165px;
    padding: 5px;
    font-size: 17px;
}

<div class="myClass">
    <select name="mySelect" size="4">
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
    </select>
</div>

Answer 1

这是一个

逗号的情况。许多人都处理过这个问题：

• StackOverflow：选择大小属性大小在Chrome/Safari中不起作用？
• 堆栈溢出：在智能手机上选择尺寸具有正常尺寸
  
• HTMLHelp.com："坏了"智能手机？

显然，这是因为浏览器不需要像我们期望的那样呈现size=""属性。W3规格：

尺寸 = 数字 [CN]
如果 SELECT 元素显示为滚动列表框，则此属性指定列表中应同时可见的行数。可视化用户代理不需要将 SELECT 元素显示为列表框;他们可以使用任何其他机制，例如下拉菜单.
(强调我的(

Answer 2

听起来很奇怪，但是值为 2,3,4 大小的 attr 在某些设备(可能是 webkit 浏览器(上不起作用，这是一个已知的错误。

您也许可以根据媒体查询手动设置选项标签的数量。

Answer 3

嗯

，只是一个盲目的猜测，但也许在 CSS 中禁用appearance？

参考： https://css-tricks.com/almanac/properties/a/appearance/