font-size:30px 的文本区域在移动设备上激活时仍会自动缩放

Question

据我了解，将文本输入的 font-size 设置为大于 16px 的大小，应该会禁用在移动设备上激活文本输入时发生的自动缩放效果。

我将font-size设置为30px，但自动缩放效果仍然存在。在 Chrome、Safari、UC、Mercury 和 Dolphin 上测试 iPhone 5.

这是一个活生生的例子：http://www.rouvou.com/pages/Stack%20Exchange。这是评论区。（用户必须先投票才能发表评论）

这是我的完整代码：

html

<div id="new-comment-mobile">
  <div id="new-good-comment">
    <%= form_for(@good_comment, remote: true) do |f| %>
      <%= f.text_area :text, maxlength: "650" %>
      <%= f.submit "Post" %>
    <% end %>
  </div>
</div>

css

#new-comment-mobile {
  position: relative;
  textarea {
    line-height: 130%;
    width: 80%;
    font-size: 30px;
  }
}

为什么浏览器仍然自动缩放？我真的不想禁用所有缩放功能...

Answer 1

把这个放在 head 标签中：

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

和post结果。 P.S。检查 css link

Answer 2

在我的 iPhone 上通过 USB 使用 iOS 开发者工具，我可以看到您的 font-size: 30px 已经完成。 @user1273587 无法通过 Chrome 开发工具看到这一点的原因是因为您的 @media 选择器仅更改移动设备上的字体大小。

根据我的测试，字体越大，设备放大越小。根据我的测试，在大约 60 像素时，设备根本不会缩放。

Answer 3

您是否考虑过定义@viewport，然后为其添加缩放属性。请在 @viewport

上查看更多信息

font-size:30px 的文本区域在移动设备上激活时仍会自动缩放

Textarea with font-size:30px still autozooms when activated on mobile

html

css

mobile

textarea

zooming