css - :after and :before not working on mobile browsers

Question

我正在尝试为移动浏览器制作一个具有特殊形状的标题。
我在我的电脑上使用 :before 和 :after 得到了我想要的三 Angular 形。虽然它在个人电脑浏览器中看起来很棒.. 到目前为止，只有我的 Samsung Galaxy s2 和 s4 上的 chrome 浏览器提供了预期的效果。即使是三星的标准浏览器也失败了。
我也在 iPhone s4 上测试过它，但在 safari 和 chrome 中都没有成功。

在我找到的所有支持这些伪选择器的页面上，它们声明每个浏览器都支持，但我的测试表明并非如此。

我的问题是，是没有支持还是我的代码有误？

这是一个简单页面的链接，其中包含我设置的代码。 http://foodlogg.net76.net/pseudo.html

*{
  margin: 0px;
  padding: 0px;
}
.top {
  background-color:#e50000;
  height:20px;
  width: 93vw;
  text-align: left;
  padding: 5px 0px;
}
.top:before {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 93vw solid #e50000;
  position: absolute;
  left: 0px;
  top: 30px;
}
.top:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 7vw solid #e50000;
  position: absolute;
  right: 0px;
  top: 0px;
}

希望你们能帮我解决这个问题。

Answer 1

这个问题与伪元素无关。

这是关于 vw 的 CSS3 相对大小调整。您的伪元素具有 vw 中给出的样式部分的宽度或边框宽度。这就是移动浏览器卡住的原因。

Android(就像在您的 Galaxies 上一样)从 4.4 开始就支持这一点。