移动设备与CSS不兼容性问题

Question

这段代码和我的网站在移动设备上无法正常工作有关。我在的第一行中有一个div，目的是在加载和点击时设置旋转的背景，这些背景被模糊处理，然后在中显示真实的图像。我希望知道代码哪里有问题。但是，如果找不到解决方案，有没有办法在移动平台上禁用某个范围内的CSS代码？

div {
  height:100%;
  width:100%;
  background-size:cover;
  -webkit-filter: blur(50px);
  -moz-filter: blur(50px);
  -o-filter: blur(50px);
  -ms-filter: blur(50px);
  filter: blur(50px);
  position: absolute;
  left:0;
  top: 0;
}

span {
  z-index:9999;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0x);
  filter: blur(0px);
}

- resriel

Answer 1

如果您想针对移动平台使用屏幕大小，请使用@media查询。否则，您可以使用JavaScript将属性注入到html标记的顶部，并使用它来隔离特定于目标设备的css代码。

例如: https://github.com/rafaelp/css_browser_selector

- Jerad Rutnam

---

那个浏览器选择器真是太棒了。谢谢你。它的效果非常好。 - resriel

欢迎。我很好奇，你能举一个 @media 查询的例子吗？ - resriel

根据浏览器屏幕大小，您可以拥有不同的样式：http://www.w3schools.com/css/css_rwd_mediaqueries.asp - Jerad Rutnam