css 16 px无法阻止iPhone/Safari上输入缩放

mmvthczy  于 2023-02-14  发布在  其他
关注(0)|答案(6)|浏览(162)

有人能帮我解决这个恶魔问题吗...
我读了所有的指南,解决方案是设置输入为16px,但它仍然不工作,它让我疯了。

@media only screen and (max-device-width: 600px) {
    input {
        font-size: 16px;
    }
}

我不明白...为什么不管用?

ghhkc1vu

ghhkc1vu1#

您可以将此代码添加到html中<head>标记的html代码中:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">maximum-scale=1将阻止输入的缩放,并且页面缩放将保持其默认缩放级别,但是如果用户想要,用户仍然可以裁剪屏幕以调整大小。

uhry853o

uhry853o2#

我通常只指定几种最流行的输入类型来设置它们的字体大小,而不是加载,我不建议只针对input,因为这也会影响复选框之类的东西...

input[type="tel"],
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="assword"],
textarea {
  font-size: 16px;
}
de90aj5v

de90aj5v3#

溶液#1

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    select,
    select:focus,
    textarea,
    textarea:focus,
    input,
    input:focus {
      font-size: 16px;
    }
}

此媒体查询将仅针对iOS设备
以下是仅针对目标设备实现媒体查询的文章。
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
溶液#2
如果你的网站是为移动设备设计的,你可以决定不允许缩放。

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

n1bvdmb64#

你还需要一个属性:

@media only screen and (max-device-width: 600px) {
    input {
        -webkit-appearance: none;
        font-size: 16px;
    }
}
jyztefdp

jyztefdp5#

我认为您需要针对文本区域,而不仅仅是输入

textarea {
       font-size: 16px;
     }

。此外,根据输入,我将使用以下任何一种:

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
 textarea {
   font-size: 16px;
 }
iklwldmw

iklwldmw6#

如果您想为iPhone应用某些样式,您应该检测触摸屏:

@media (hover: none) and (pointer: coarse)

因此,要在触摸屏上为输入设置font-size,您应该执行以下操作:

@media (hover: none) and (pointer: coarse) {
  input[type=text] {
    font-size: 16px;
  }
}

相关问题