只在移動Safari

這裏100％寬度的CSS問題是有問題的網站：www.prestigedesigns.com 只在移動Safari

的問題是，我的頁眉和頁腳不會延伸到其指定的100％，但僅適用於iPhone/iPad上。

我試過我認爲的一切，我真的可以使用一些幫助？還有其他人有類似的問題嗎？

謝謝。

2011-07-14 george

這是移動Safari的一種視口問題，但您可以通過縮小桌面瀏覽器窗口的寬度並向右滾動來獲得相同的效果，您會看到背景開始褪色。

這是因爲當你設置width:100%您#top和#header div的，你告訴他們調整到包含元素，在這種情況下是瀏覽器窗口，（或視口）的寬度。你並沒有告訴他們調整內容。

Mobile Safari的默認視口寬度爲980px，所以它使用980px作爲div的包含元素的寬度。這就是爲什麼你的佈局是1050px左右，它的背景被切掉了。

可以通過直接設置其視口（讀Apple's Docs），或通過添加min-width:寬度以像素爲單位設計的解決這個問題的移動的Safari;到您的body。 Mobile Safari將使用min-width的值來設置它的視口，並且它也會防止它在桌面瀏覽器中發生。

2011-07-14 17:02:55

謝謝沃爾特。我很欣賞它，現在它在iPhone/iPad上看起來不錯。 – george

謝謝！ body {min-width：980px}修正了這個問題。 –

thx爲此...正在破壞我的頭。 – chris

它沒有分配width: 100%標題變得width: 1009px;與頁腳相同的東西。

2011-07-14 15:29:43

嘿大衛。標題如何獲得1009px？我很困惑。因爲它會在該px的桌面瀏覽器上呈現的情況。但不是。多數民衆贊成在什麼我感到困惑 – george

看起來像我看錯了，你的網頁似乎不能很好地在Safari瀏覽器。我的猜測是頭部嵌套在頭部的方式。您更可能有一個與iPhone –

視口問題，它在我的Safari瀏覽器（mac）上看起來確定。它可能是一個視口問題。它驅使我堅果 – george

只是一種預感，因爲我無法實際測試，但同時footbar設爲％footbar內你有腳件被設置爲絕對寬度以像素爲單位 - 與你的頭元素是相同的 - 嘗試切換這些也是％？

2011-07-14 15:34:37 allanmayberry88

事實上，如大衛說上面，頭沒有被分配一個'寬度：100％;'在所有 – allanmayberry88

即時困惑我的CSS有一個包含div #top設置爲100％，然後一個包含div #topbox設置爲在頁面中的頂部元素在1024頁寬的頁腳/頁眉中居中排列的頂部元素 – george

#top正在被另一種風格覆蓋，請嘗試！寬度爲100％時重要 –

設置視口以使您的頁面適應任何設備。

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

2012-04-25 15:27:58 helpyou

完美，謝謝！ –

在CSS文件中設置min-width:(Width of your design)px;，這個問題就解決了。

2014-03-25 16:03:41

回答