手機網站版本取決於設備屏幕的方向

Question

有點背景：我是一個自願重新設計我的額外課程機器人團隊使用的網站的學生。這是我第一次創建和使用Bootstrap和一般響應式設計，並且在我看來，一切都非常順利，直到我將網站上傳到測試域並在移動設備上查看它爲止。

問題我現在面臨的交易與導航欄和內容取決於設備的方向在網站上的寬度。當設備處於肖像模式（垂直）時，導航欄和內容在文本中沒有足夠的空間，因此使頁面變得非常長，佔用大量空間。另一方面，當設備是橫向的（側面），網站，至少我會考慮，完全罰款：

http://imgur.com/gallery/toZYt（專輯，因爲我現在不能發佈兩個以上的鏈接，顯示圖片的問題在更大的（視覺）細節）

我已經試驗了網頁的視口/初始比例，雖然這確實改變了導航欄和內容的寬度，導航欄的文本/標誌被壓扁了，質量也相對較差。更改媒體的最小/最大寬度似乎沒有任何作用。我堅持要如何解決這個問題，以及它是不是@media問題，或者是否與我的CSS菜單/內容有關。我的CSS主CSS中的內容有125px的餘量，主要是爲了讓桌面網站看起來不錯，所以也許這與一些事情有關？

我想這個問題早些時候研究其他職位和其他網站，但我無法找到任何東西，似乎與我的問題，有什麼建議沒有真正修復/影響的網站的一個主要方式。我希望能夠在不影響網站其他形式（橫向/桌面）以及文本/內容邊距的情況下解決此問題。

我發現，問題仍然存在於其他手機（上萬普拉斯X，iPod第5代和iPhone 6測試），但一直沒能測試它在平板電腦上。如果任何人有任何建議，我會在網站上解決這個問題，這將不勝感激。謝謝閱讀！

Answer 1

您需要查看CSS媒體查詢。 有幾件事你應該修復，包括125px的邊距。

舉例來說，利潤率是太大了用於移動設備，所以你應該做的是：

.element { 
    margin: 0 15px; /* Default margin */ 
} 

@media only screen and (min-width: 1024px) { 
    .element { 
    margin: 0 125px; /* Margin for displays > 1024px */ 
    } 
} 

您可以設置影響多個相同的元素媒體查詢。要建立在上面的例子中，你可以有一個更查詢@ 1280px：

/* ... */ 
@media only screen and (min-width: 1024px) { 
    .element { 
    margin: 0 125px; /* Margin for displays > 1024px */ 
    } 
} 

@media only screen and (min-width: 1280px) { 
    .element { 
    margin: 0 200px; /* Margin for displays > 1280px */ 
    } 
} 

的一個好辦法，在較低的分辨率是利用瀏覽器的內置響應視圖調試佈局。 現在，您可以在所有主流瀏覽器中執行此操作，例如在Chrome中，您需要打開開發工具（Ctrl + Shift + I或Cmd + Opt + I），然後點擊左上角的手機+平板電腦圖標。

---

我把你的網站仔細一看後，我發現了一些修正，你可以適用於它，以使它看起來更好較小視口：

1：（第一刪除。導航欄品牌> IMG內嵌樣式（最大寬度和邊距）

.navbar-brand img { 
    max-width: 200px; 
    margin-top: 14px; 
} 

@media only screen and (min-width: 440px) { 
    .navbar-brand img { 
    max-width: 350px; 
    margin-top: 7px; 
    } 
} 

2：調整屏幕較小

.border-control { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

@media only screen and (min-width: 768px) { 
    .border-control { 
    padding-left: 125px; 
    padding-right: 125px; 
    } 
} 

邊境管制填充如果這還不讓很多感覺，我建議你閱讀media queries here並找出它們如何深入工作。