gpt4 book ai didi

html - 当输入集中在移动 safari 上时,页面底部出现不需要的填充

转载 作者:太空狗 更新时间:2023-10-29 13:51:51 27 4
gpt4 key购买 nike

我在移动 safari 上使用文本区域,当文本区域聚焦时,视口(viewport)似乎在文档下方添加了填充。检查和选择区域时,它不会解析为元素,甚至不会解析为 html 节点。

文本区域在屏幕上的位置或者它是否是绝对位置似乎并不重要,填充始终在其聚焦时存在。有时您必须向下滚动才能使其可见,但理想情况下根本不可能使其可见。

我在下面添加了一个带有屏幕截图和代码的示例。有一个 100% 宽度和高度的封面,以显示文档的常规边界所在的位置,文本区域绝对位于正文的底部。

不专心: Unfocussed

重点(箭头指向不需要的填充): enter image description here

代码:

<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>

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

最佳答案

我认为这不能用 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

就解决方案而言,这是一个设计问题,我想知道是否有一种方法可以让您利用这个空白空间。用户将专注于他们输入的内容,您可以让它看起来不错:)

关于html - 当输入集中在移动 safari 上时,页面底部出现不需要的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33757554/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com