当输入集中在移动 safari 上时，页面底部出现不需要的填充
Posted
技术标签:
【中文标题】当输入集中在移动 safari 上时，页面底部出现不需要的填充【英文标题】：Unwanted padding at bottom of page when input focussed on mobile safari 【发布时间】：2016-02-18 20:38:53 【问题描述】：我在移动 safari 上使用 textarea，当 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>
我很感激人们有任何见解。谢谢。
【问题讨论】：
虽然我没有 iPone，但直觉上我会说在 CSS 顶部添加html, body width: 100%; height: 100%; margin: 0; padding: 0 以消除任何默认间距和大小以全屏显示。甚至可以将overflow: hidden 添加到您的body。当 html/body 没有特定高度时，某些浏览器不知道子级中的height: 100% 是什么意思，没有初始高度可参考。
我注意到，如果我添加 <meta name="apple-mobile-web-app-capable" content="yes" /> 并将页面作为 Web 应用程序固定到 iPhone 主屏幕，则填充不存在。我认为这表明它是移动 Safari 中的一个错误。我最初是这样认为的，因为滚动以使该填充可见有时会抖动。
我也有这个问题。你找到解决办法了吗？
【参考方案1】：
我不认为这可以用 CSS 解决，它似乎是 Safari chrome。
当我在实际设备 (6+) 上测试它时，底部的空间是白色的。我玩了一些带有定位的 :focus 样式，发现我只是切断了容器。
#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
就解决方案而言，这是一个设计问题，我想知道是否有一种方法可以利用这个空白空间来发挥自己的优势。用户将专注于他们输入的内容，你可以让它看起来不错:)
【讨论】：
【参考方案2】：这看起来像是 iPhone 的输入缩放功能导致了该填充...
在这里查看答案：Disable Auto Zoom in Input "Text" tag - Safari on iPhone
似乎将输入字段字体设置为 16 像素会禁用此功能。
【讨论】：
我在示例代码中将 textarea 的font-size 设置为 18px，所以它似乎不是输入缩放效果。我在视口元标记中也有user-scalable=no，它应该完全禁用缩放。
@Marcus 您必须将字体大小设置为 16px 才能禁用缩放...这就是我链接的整个线程的内容，有一些“故障”忽略了所有用户可缩放的输入除非你明显这样做。
我有一个代码笔，其中包含线程在此处建议的修复：codepen.io/anon/pen/epwbYP。好像没什么区别。
@Marcus 我建议删除输入标签并使用可编辑的 div... 可能没有输入给您带来的问题。 jsfiddle.net/ThinkingStiff/AbKTQ
contenteditable 似乎没有什么不同。我认为这只是 Safari 对任何集中输入的回应。它甚至在屏幕上的哪个位置也没有关系。【参考方案3】：
我已经在another question 上回答了同样的问题。
但我也会在这里回答：
body
min-height: 100vh;
min-height: -webkit-fill-available;
html
height: -webkit-fill-available;
-webkit-fill-available;
创造“魔法”
【讨论】：
【参考方案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;
您应该始终在样式的顶部进行重置
【讨论】：
我添加了那个重置，它没有影响任何东西。我也想过类似的事情。我尝试了很多不同的组合，但检查元素显示没有任何边距或填充。 @Marcus 有没有办法可以将它上传到互联网上，我可能会找出问题所在 @Marcus 你使用媒体查询吗？ 不在导致此问题的示例中。如果你在 Mac 上运行，你可以打开我在 ios 模拟器中提供的页面。 这是我一直使用的，我没有这样的问题以上是关于当输入集中在移动 safari 上时，页面底部出现不需要的填充的主要内容，如果未能解决你的问题，请参考以下文章
当点击视口底部时，防止 Mobile Safari 显示工具栏