html - 移动设备/iPad 上的视差效果？

Question

我在我的网站上只使用 HTML/CSS 有一个视差效果，它在所有浏览器中都有效，除了 IE7/8，我只显示一个正常的图像，这样用户就不会看到可怕的白色差距。只是想知道是否有一种解决方法可以在移动设备/iPad 等设备上查看视差效果？或者我可以设置默认图像的方式，就像我为 IE7+8 所做的那样

示例 fiddle我的视差效果。

<!--[if lte IE 7]>
    <div id="ie7_christmas_parallax">
        <img src="xmas/ie7_ie8.jpg">
    </div>
    <![endif]-->   <!--[if IE 8]>
    <div id="ie7_christmas_parallax">
        <img src="xmas/ie7_ie8.jpg">
    </div>
    <![endif]-->
<h1>My Page</h1>
<h2>Flowers, Flowers, Flowers </h2>

    <div id="slide2" class="slide" data-stellar-background-ratio="0.5" data-slide="2"> </div>

<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>
<h2>Some text goes here</h2>

#slide4 {background-image: url("http://ibmsmartercommerce.sourceforge.net/wp-content/uploads/2012/09/Roses_Bunch_Of_Flowers.jpeg");
-webkit-background-size: contain;
float: left;
margin-top:20px;
height: 450px;}

.slide {background-attachment: fixed;
height: 100%;
position: inherit;
width: 100%;
}

Answer 1

您可以使用媒体查询根据屏幕宽度更改 css 通常手机的宽度是从 320 到 768，所以:

@media (max-width: 768px) {
 // your css code here
}