如何使用Bootstrap維護手機響應能力？

Question

（開始對我的問題，因爲人們downvoted和鎖定它，因爲我沒有添加圖片...所以我們走了，因爲我從其他網站得到的答案，這實際上是大型響應網站的重要，我也提供答案）

我試圖克服視口的像素密度（真實與硬件），即使在巨大的平板電腦上基本上破壞/摺疊Bootstrap網站，只是因爲他們有巨大的分辨率（唉，他們默認爲一個巨大的縮放，這會導致引導程序崩潰內容，即使它適合）。

這裏，自引導自己的網站，達到效果：

但是，相反，即使在設備具有更高的分辨率，我得到這個：

的原因是視口標準，根據dpi「執行」縮放以防止網站渲染過小（例如：400dpi設備上的12px字體幾乎不可讀）。不過，我想讓用戶決定是否要縮放，而不是限制爲硬編碼縮放（例如，我的xperia Zq 1920像素具有硬編碼的220％縮放，僅剩下小於900像素的視區，這會使引導程序不能響應模式）。

小貼士？

Answer 1

根據視口的規範（這仍然是一個草稿，但很快就會成爲一個標準，參考可以在這裏找到：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag），如果你設置一個固定值視口的寬度，這並不意味着該視口將具有該寬度，但該視口應至少具有該寬度。因此，例如，如果將視口設置爲1000像素，則視口將被放大到該尺寸，導致更小的縮放，並且導致引導程序不會崩潰。

根據規範，如果設備不能將視口放大到所需的大小，它將放大到最大可能的大小（alas，設備的真實像素寬度），但仍然會執行縮放，可能會導致崩潰。

因此，要防止網站上的崩潰，可以處理的屏幕，比如，768px（平板電腦引導的定義），解決的辦法是：

<meta name="viewport" content="width=768, initial-scale=1"> 

這將防止崩潰，如果設備有768或更多real像素，否則會崩潰，因此，如果有足夠的空間，網站將顯示與桌面上的相同。

爲什麼要這樣做？（又名利弊）

• 在這樣高DPI設備上的移動版將類似於桌面版本，並不會崩潰，即使它顯然可以處理現場
• 響應將繼續在這些設備上，而不是自動合攏無論移動是由於高視約束（通常高於200％縮放），你只更改默認的「開始放大」到「啓動未縮放」

爲什麼不呢？（又名缺點）

• 通過減少或禁用視口的變焦效果，字體和其他組件將呈現的「真實尺寸」，其高DPI設備上可能太小（如12px的字體，一個400dpi幾乎是不可讀的） - 但是，用戶仍然可以放大自由，這將導致網站按需崩潰，就像在桌面版上調整窗口大小一樣。因此，該解決方案不會破壞任何內容，只需更改默認行爲即可。
• 在真正小巧但高DPI的設備上，這仍然很煩人，因爲每次都需要縮放，所以您指定的尺寸實際上應該是較小的可能尺寸，而不僅僅是強制設備的實際像素數和完全禁用變焦