iPad上的寬度不正確

-1

在開始爲一家新公司工作之後，我一直負責爲他們建立一個新網站。這是我到目前爲止有：iPad上的寬度不正確

http://ghostevolution.com/ghostds/

的問題是，它不是在iPad上正常工作 - 標題背景顏色不會遇到像在屏幕的整個寬度延伸是爲了 - 在頁面上的中間部分淺灰色背景顏色也是如此，例如http://ghostevolution.com/ghostds/?page_id=160

有沒有人知道這是爲什麼？謝謝。

來源

2011-09-19 Daniel

請在這裏發佈相關代碼和/或屏幕截圖。否則，一旦問題得到解決，這個問題就會對後代失去一切價值。謝謝！ –

同意Pekka。此外，你用什麼來確定用戶是否在iPad上？我查找了@ @ media'查詢，但在你的css中找不到任何查詢。然後，我會假設PHP ...我們需要知道您在iPad上顯示的代碼，然後才能提供幫助。 – Ben

這是由於經常被遺忘的問題（在桌面瀏覽器中）。我很確定..

你看，用任何桌面瀏覽器。更改窗口的寬度小於包裝寬度並向右滾動。這將顯示該頁面被切斷。

這可以很容易地修復。 _{自其不再運行}

的基本思想刪除csspivot網站是添加被切斷成具有固定的寬度，因爲瀏覽器不能做任何事情到該元素相同的背景。

添加CSS：

#auxiliary .wrap { 
background-color: #bbb; /* Same as the #auxiliary bg color*/ 
} 

#branding .wrap { 
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/ 
background-color: #333; 
height: 60px; 
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */ 
}

來源

2011-09-19 08:42:42 Joonas

什麼？這與OP的問題無關，並不是解決他們問題的方法。 – Ben

不是..這個問題與...有關。包裹元素本身，寬度沒有被設置爲100％的流體，並且它們沒有被適當地構造以包含內嵌和浮動元素。 – Ben

半稱職正確的方法做，這是包裝在跨屏幕寬度的100％的容器的內容。例如：

CSS

.wrapper { 
    display: block; 
    width: 100%; 
    padding: 10px 0; /* add some top + bottom padding */ 
    background-color: #252525; 
} 
.aligner { 
    display: block; 
    width: 960px; 
    margin: 0 auto;  
} 
.container { 
    display: inline-block; 
}

HTML

<div class="wrapper"> 
    <div class="aligner"> 
     <div class="container"> 
      // stuff 
     </div><!-- /container --> 
    </div><!-- /aligner --> 
</div><!-- /wrapper -->

這不是最漂亮的，但它可以讓你扔在任何部分寬度爲100％背景顏色和作品在< IE8。你可以在div.container（float，position等）內做任何你需要的東西，它會擴展.wrapper元素（從而擴展你的背景顏色）。

每個div.wrapper應被視爲一個「部分」 - 「標題」，「特徵」，「內容」，「頁腳」等...

另一替代方案是，開始使用@media查詢，這將允許您基本插入特定屏幕寬度的代碼（適用於iPad，縱向/橫向的880/1024px）。

@media screen and (max-width: 880px) { 
    .my_element { 
     /* attributes */ 
    } 
}

來源

2011-09-19 08:55:46 Ben

iPad上的寬度不正確

回答

相關問題