HTML/CSS - 在移动设备上点击时放大 select 标签

Question

我有一个带有选项的 select 菜单。

当我在移动设备上点击此菜单时，它会稍微放大。是否有 -webkit 属性或其他原因造成的？

如何更改它，使其在点击 select 菜单时不在屏幕上放大？

请看下面的动图。

<select class='example'>

  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>
  <option>Example</option>

</select>

Answer 1

是的，某些手机和平板电脑在与表单元素交互时会出现这种情况。将此元标记添加到您的 <head> 应该可以解决您的问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />

这里详细解释了它的作用及其工作原理： https://thingsthemselves.com/no-input-zoom-in-safari-on-iphone-the-pixel-perfect-way/

HTML/CSS - 在移动设备上点击时放大 select 标签

HTML/CSS - Zooms in on select tag when tapped on mobile

html

javascript

css

webkit