2013-11-27 20 views
1

我在我的網站上僅使用HTML/CSS的視差效果,它在所有瀏覽器中都有效,除IE7/8外我只是顯示正常圖像,這樣用戶沒有看到可怕的白色空白。只是想知道是否有解決方法來查看移動設備/ iPad等視差效果?或者我可以設置一個默認圖像的方式,就像我爲IE7 + 8所做的一樣。移動設備/ iPad上的視差效應?

示例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%; 
} 

回答

0

您可以使用改變媒體查詢根據屏幕 的寬度的CSS通常手機的寬度是從320到768,所以:

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