响应式 CSS 图片无法在移动设备上使用

Question

我正在尝试实现此响应式 css 图像滑块，但它似乎根本无法在移动设备上运行。Demo review

当我在我的 phone 上访问 Codepen 页面时，它工作正常，但在我的 url 上，由于某种原因它只是挂在第一张图片上..（仅在移动设备上，在桌面上工作正常）我在不同的 phone 上尝试了不同的浏览器..

现在的代码与 codepen 上的代码完全一样，没有标签冲突或类似的问题，而且相当简单。

您是否需要添加其他内容以使其适合移动设备？我无法想象是什么，因为它只是 CSS..

所以，也许我需要另一双眼睛，但我只是没有得到可能影响它的东西？？

代码如下：

HTML

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

CSS

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

谢谢！！

Answer 1

通常在这些情况下，罪魁祸首是视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

你在你的网页上添加了吗？

响应式 CSS 图片无法在移动设备上使用

Responsive CSS image not working on mobile

html

css

mobile

slider