一種在iPad的Safari中更正背景縮放的方法？

我有一個網站在div容器（100％x 100％）中使用巨大的背景圖像（2000x1500）。一種在iPad的Safari中更正背景縮放的方法？

當我在iPad上的Safari上打開該網站時，它會以與內容（〜80％）不同的比例縮小（〜40％）。

我將背景移動到100％寬度和100％高度的div以及溢出設置「隱藏」的img-tag中。完全相同的事情發生。

是否有CSS設置可以幫助Safari以與內容相同的比例縮小背景圖像？

2010-06-03 favo

你應該爲iPad創建一個單獨的樣式表。您可以使用下面的命令來完成：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

在這個環節，你會發現你的網站在iPad上的方向和如何處理它的信息。

我的建議是，爲您的網站的iPad版本創建一個單獨的樣式表（css文件），無論您做什麼，您都應該創建它並添加一個鏈接標籤，如上所示。

如果您的背景爲iPad版本的圖片爲2000x1500px，那麼您可以將它降低到適合iPad，如果這是您唯一遇到的問題。我會說你應該將圖像的大小減小到1024px，並在iPad的單獨樣式表中聲明它，並且你會看到最終結果。

讓我知道它是怎麼回事。

BTW你應該讀這篇文章還有：http://www.inspiredm.com/2010/02/09/ipad-design/

來源

2010-06-03 14:25:54 UXdesigner

這工作完美，謝謝！我開始爲背景容器使用第二個具有固定像素大小的CSS，也感謝文章 - +1！ – favo 2010-06-03 14:43:13

不客氣。我只注意到我參考，我響應一個鏈接，但我沒有貼鏈接：關於iPad的佈局方向：http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes – UXdesigner 2010-06-03 19:31:19

只是一個除了回答@UXdesigner給出 - 利用''標籤不打破IE瀏覽該網站。 – vikmalhotra 2010-07-26 01:36:10

看來，當你有一個附加的的<體>標籤的背景圖像此問題僅出現在iPad上。如果將背景圖像放入包含div的問題中，問題可以得到解決 - 如果您不需要將背景圖像「固定」，這是一個很好的解決方法，因爲使背景固定在IE中的技術要求您使用<機身>標籤圖像。

可以看到在這兩個位點的不同，首先使用用於定位的<體>標籤（由於在背景圖像上的固定定位）和第二個使用的含DIV：

http://www.mricsi.com http://www.collinshirsch.com

希望有幫助！

編輯 - 這是不完全準確的 - 似乎這只是一些時間的情況，以及爲什麼背後的原因還不清楚。

來源

2010-09-15 17:48:27

我有一個5400x556作爲（滾動）背景圖像在一個div中。作爲一個.jpg，它得到了大幅度的縮減，就像一個.png一樣。現在唯一的麻煩是.png是5 megs。格兒。

雖然在單獨的樣式表上有很好的調用。

好運

歐文

來源

2010-09-28 06:34:25

添加這個工作對我來說，當我不得不在背景畫布背景圖片...

body{ -webkit-background-size: 2000px 1400px;}

顯然，一個有正確的更換尺寸圖像的大小。

來源

2011-05-06 00:16:44

我確認這工作得很好。謝謝。 – madr 2011-09-05 15:23:49

只需要這個作爲一個快速修復，就像一個魅力。 – EinLama 2012-03-01 10:39:34

IOS還可以進行擴展200萬像素+圖像下來，當心http://stackoverflow.com/questions/2860387/ipad-iphone-scale-background-images – vearutop 2012-07-03 15:39:08

我用：

body {min-width:2000px; min-height:1500px }

來源

2011-09-24 13:49:38

可以使用@UXdesigner的解決方案來創建用於iPad的一個分離式樣式表。但是你可以使用一個單獨的語句在目前的樣式表：

@media only screen and (max-device-width: 1024px){ 
    .yourClassname{ 
    max-width: 500px; 
    } 
}

當然對於像手機更小的設備，你可以使用：

@media only screen and (max-device-width: 480px){ 
    .yourClassname{ 
    max-width: 100px; 
    } 
}

注意的是，這些建議只有在CSS3工作（最新設備全部接受）

來源

2012-08-03 13:11:20 arnoudhgz

一種在iPad的Safari中更正背景縮放的方法？

回答

相關問題