擠壓到左邊的iPhone上的Safari

您好，感謝jQuery的循環2幻燈片幫助，我創建了一個網站在這裏：擠壓到左邊的iPhone上的Safari

http://www.furniturebymartin.co.uk/index.html

的索引頁上的幻燈片精美的作品上，除了Safari瀏覽器每個瀏覽器，但只限於iPhone上的Safari。在iPad上看起來很棒。在iPhone上，它將圖像壓縮到頁面的左側。我不知道如何解決這個問題。我在網上搜索了答案，但沒有運氣。如果有人能幫忙，我會非常感激。謝謝。

來源

2014-01-23 HelenSendall

我已經真正解決了它！再次！

所以，我在index.html頁面上的HTML代碼的標籤設置爲

align="centre"

此設置幻燈片頁面的中間，雖然它仍然被壓扁。

有在樣式表（styleMAIN.css），將其在循環2的建議其中加入看起來像這樣的區段：

/* media queries some style overrides to make things more pleasant on mobile devices */ 
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    .cycle-slideshow { width: 480px;} 
    .cycle-slideshow img { width: 100%; height: auto } 
    .cycle-overlay { padding: 4px } 
    .cycle-caption { bottom: 4px; right: 4px } 
}

的480像素的寬度的設定是在iPhone太小在Safari中，所以我增加到720px。這仍然比原始版本更窄，對於所有其他瀏覽器，原始版本設置爲800px，但足夠大以在iPhone上正常工作。新的CSS代碼如下：

/* media queries some style overrides to make things more pleasant on mobile devices */ 
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    .cycle-slideshow { width: 720px;} 
    .cycle-slideshow img { width: 100%; height: auto } 
    .cycle-overlay { padding: 4px } 
    .cycle-caption { bottom: 4px; right: 4px } 
}

我無法解釋爲什麼建議是保持寬度480像素下，因爲它顯然是太小了，但越來越多的它已經奏效。

來源

2014-01-24 08:04:33 HelenSendall

擠壓到左邊的iPhone上的Safari

回答

相關問題