Question

我正在使用移动safari上的textareas，当一个textarea被聚焦时，视口似乎在文档下面添加了填充。在检查和选择区域时，它不会解析为元素，甚至是html节点。

如果textarea在屏幕上的位置或者它是否绝对位置似乎并不重要，填充在聚焦时总是存在。有时你必须向下滚动才能看到它，但理想情况下，它根本不可能让它可见。

我在下面添加了一个屏幕截图和代码示例。有一个100％宽度和高度的封面，用于显示文档的常规边界，而textarea绝对位于正文的底部。

不聚焦：

聚焦（箭头指向不需要的填充）：

代码：

<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <style>
      html{
        background-color: gray;
      }

      body{
        width: 100%;
        margin: 0px;
      }

      #cover{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
        background-color: green;
      }

      #textarea{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        display: block;
        margin: 0px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="cover">Cover</div>
    <textarea id="textarea"></textarea>
  </body>
</html>

我很感激人们的见解。感谢。

Answer 1

我不认为这可以用CSS解决，它似乎是Safari chrome。

当我在实际设备（6+）上测试它时，底部的空间是白色的。我玩了一些：定位的焦点风格，发现我只是切断了容器。

#textarea:focus {
  border-bottom: 14px solid red;
  bottom: -6px; //shows 1px of border
  //bottom: -7px; //shows no border
}

你可以在这里玩。 http://codepen.io/ArleyM/pen/NGmbWW?editors=110

就解决方案而言，这是一个设计问题，我想知道是否有一种方法可以利用这个空白区域来获得优势。用户将专注于他们进入的内容，你可以使它看起来很好：）

Answer 2

看起来像iPhone输入缩放功能导致填充......

在此处查看答案：Disable Auto Zoom in Input "Text" tag - Safari on iPhone

似乎将输入字段字体设置为16px会禁用此功能。

Answer 3

我在another question上也遇到了同样的问题。

但是我也会在这里回答

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

-webkit-fill-available;

使“魔术”

Answer 4

在你的css样式的顶部添加：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
}

你应该总是在你的风格顶部重置

当输入集中在移动野生动物园时，页面底部不需要填充

4 个答案: