小编Man*_*anu的帖子

Android键盘使用CSS中的单位vh缩小视口和元素

我遇到了一个非常奇怪和独特的问题.

由于项目的性质,我的所有页面都使用vh和vw CSS单元而不是px.

问题:在Android平板电脑上,当您触摸输入字段时,默认键盘会推动视图端口,导致页面和页面中的所有元素缩小.

在ipad上,由于键盘与屏幕重叠并且没有按下屏幕,因此该问题不存在.

寻找任何解决方案,以避免Android键盘不推动浏览器的视口并保持原始大小.

注意:我唯一的选择是避免键盘按视口,我将无法更改CSS单位或使用xml,manifest.这些是遇到此问题的网页.

html javascript css android

18
推荐指数
4
解决办法
9918
查看次数

如何在容器之间添加透明间隙的边框

这是我试图用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)

html css linear-gradients css3 css-shapes

15
推荐指数
1
解决办法
1774
查看次数

标签 统计

css ×2

html ×2

android ×1

css-shapes ×1

css3 ×1

javascript ×1

linear-gradients ×1