我遇到了一个非常奇怪和独特的问题.
由于项目的性质,我的所有页面都使用vh和vw CSS单元而不是px.
问题:在Android平板电脑上,当您触摸输入字段时,默认键盘会推动视图端口,导致页面和页面中的所有元素缩小.
在ipad上,由于键盘与屏幕重叠并且没有按下屏幕,因此该问题不存在.
寻找任何解决方案,以避免Android键盘不推动浏览器的视口并保持原始大小.
注意:我唯一的选择是避免键盘按视口,我将无法更改CSS单位或使用xml,manifest.这些是遇到此问题的网页.
这是我试图用CSS实现的设计图像.

如何为容器div实现此类边框,以便我可以在间隙之间放置透明徽标和文本.此设计将在视频背景上进行.黑色背景仅用于说明目的.
到目前为止,我试图通过测试来实现这样的目标:
body {
background: black;
}
p {
color: #ffffff;
font-size: 16px;
text-align: center;
padding: 30px;
}
.steps-frame-1 {
margin-top: 60px;
width: 50%;
height: 200px;
margin-left: auto;
margin-right: auto;
}
.steps-frame-1 {
border: 0;
position: relative;
}
.steps-frame-1::after,
.steps-frame-1::before {
content: '';
position: absolute;
width: 100%;
height: 45%;
border: 2px solid #fff;
}
.steps-frame-1::before {
bottom: 0;
border-top: 0;
}
.steps-frame-1::after {
border-bottom: 0;
top: 0;
}Run Code Online (Sandbox Code Playgroud)
<div class="steps-frame-1">
<div class="inner">
<p>content Lorem Ipsum is simply dummy text …Run Code Online (Sandbox Code Playgroud)