引導程序-使頁面無響應，並向所有設備顯示桌面版本

Question

我目前有一個響應速度快的網站，但是由於它在手機和平​​板電腦上的效果不是很好，因此我希望在所有較小的設備上都使其像台式機（ .col-md-x ）。 我使用bootstrap 3。

因此，如果分辨率大於1200px ，則應顯示大版本（ .col-lg-x ），否則，應始終顯示桌面版本（ .col-md-x ）。

為此，我刪除了

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

從頁面標簽head的標簽，並用它代替

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

可以解決問題，但是頁面非常縮小。 因此，我在引導程序自定義頁面中更改了引導程序斷點，以使col-xs-x和col-sm-x和col-md-x在1px頁面寬度處中斷，而col-lg-x在1200px頁面寬度處1200px 。

現在更好了，但側邊欄和其他一些元素將隱藏在小型設備上，並且在那里沒有顯示整頁。 我想要的是一個完整的頁面，例如帶有水平和垂直滾動條的桌面，沒有斷裂，沒有隱藏，沒有折疊的導航欄和其他東西。 我該如何實現？

Answer 1

對標准設備使用Media Queries您應該在所有網頁中包含以下<meta>視口元素：

您可以學習<meta name="viewport" content="width=device-width, initial-scale=1.0">

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

例

/*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }

    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

Answer 2

如果僅為col-xs-x定義行為，則它對於較大的格式應自動顯示相同的行為，因此此處的解決方案是僅在元素上使用col-xs-x。

我們不需要為超小型設備定義任何內容，因為默認值為一列。 我們必須為小型設備而不是中型設備定義網格大小。 這是因為網格層疊起來 。 因此，如果在sm處定義大小，則它將是sm，md和lg的網格大小。

更多信息可以在這里找到