iPad 2網站大小問題

好吧，在我開始之前，我會開始說我不是一個有經驗的Web開發人員！iPad 2網站大小問題

我寫這個網站：http://leydencarcentre.co.uk

它看起來合理的桌面瀏覽器，但我有入手iPad（2）正確地顯示它掙扎。

在iPad在縱向「首頁」頁面是有點放大，當你打開它，但你不能縮小讓屏幕上的整個頁面寬度。所以整個寬度符合「MOT」頁面完全縮小。

在iPad上的景觀他們看起來是正確的。

我的網站基本上是960px固定寬度，但是我注意到我試圖用媒體查詢使它有點響應。（這不是流暢的佈局，但不同尺寸的桌面，平板電腦，手機有不同的div寬度）。我已經爲每種佈局製作了不同的背景色，因此您可以看到每種媒體類型的CSS何時啓用（桌面爲白色，平板電腦爲白色，手機爲橙色）。

任何人都可以幫忙嗎？我搜索了諸如「iPad網站寬度」之類的東西，但我無法理解最佳路線。

在這個特定的iPad問題上的任何幫助或對我的CSS和佈局的建議很好地收到！

我知道充分響應流體佈局是老李，但我希望得到這個網站很快完成。真的需要完全流體佈局嗎？

感謝，

保羅

來源

2012-10-16 Paul

我忘了提，我曾嘗試與視標籤玩耍...它當前設置爲'' – Paul

的因爲它不會在肖像中縮小得足夠遠，因爲該頁面不夠長，不足以使其完全縮小以填充寬度。在寬度可以之前，高度會完全縮小。 –

所以我應該只是添加一些空白填充到主頁，使其更長？那麼當我在橫向模式下我不會有剩餘空白的頁面？ – Paul

我cale_b進去最後，我嘗試了許多視口設置，它在iPad上顯示OK，但在Android下Chrome上不顯示，反之亦然。

所以我加了一個最小高度到我的主體div。

感謝cale_b

來源

2012-10-17 14:09:44 Paul

最簡單的解決辦法：

<meta name="viewport" content="width=1000">

這將擴大iPad的視口正好適合你的頁面（鉻告訴我的身體是1000像素寬）。

在移動網絡的良好做法方面，我也想加入一些縮放選項，使用戶可以放大/縮小頁面的不同部分..類似：

<meta name="viewport" content="width=1000, minimum-scale=.5, initial-scale=1, maximum-scale=2.5">

來源

2012-10-16 21:13:45 chrisgonzalez

啊，桌面CSS是1000寬，但請注意，當您調整瀏覽器的縮小範圍時，它將寬度切換爲960（我這樣做是爲了嘗試和迎合iPad第一個地方...我讀了一個地方，寬960寬是iPad的寬度）。所以我需要將視口固定到960？跨多個設備進行互操作是否是一件好事？ – Paul

簡易解決方案將網站設置爲960像素，並將視口寬度設置爲960。只要您允許用戶在移動設備/平板電腦上擴展網站，就可以提供體面的用戶體驗。如果您完全響應，您將不得不重新訪問您的佈局，以確保它適用於所有不同大小的設備 - 例如，重新定位側面內容，以適當方式持續導航每個設備，並確保所有東西都以一種合理的方式垂直堆疊。 – chrisgonzalez

很難做響應式設計作爲改造:) – chrisgonzalez

iPad 2網站大小問題

回答

相關問題