引導 - 使頁面不響應並顯示桌面版本的所有設備

Question

我目前一個網站，是響應，但因爲它不是在手機和平​​板電腦非常好，我想讓它像所有的小設備桌面（.col-md-x） 。我用引導3.

所以如果分辨率超過1200px它應該顯示大版（.col-lg-x），如果不是，它應該始終顯示在桌面版本（.col-md-x）。

做到這一點我從head頁面標記刪除

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

標籤與

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

該做的伎倆所取代，但該頁面是非常非常縮小。所以我更改了引導程序自定義頁面中的引導程序斷點，以便col-xs-x和col-sm-x和col-md-x在1px頁寬上斷開，col-lg-x在1200px上斷開。

其更好，但現在的工具條和其他一些因素將在小型設備和完整的頁面隱藏省略記載。我想要的是像水平和垂直滾動條的桌面一樣的完整頁面，沒有中斷和隱藏，也沒有崩潰的導航欄和其他東西。我怎麼能做到這一點？

Answer 1

如果定義僅適用於COL-XS-X的行爲，它會自動顯示較大的格式相同的行爲，所以這裏的解決方法就是使用COL-XS-X上的元素。

由於默認值爲一列，所以我們不必爲超小設備定義任何內容。我們必須爲小型設備定義網格大小，但不適用於中型設備。 這是因爲電網級聯。所以如果你定義一個sm的大小，那麼它就是sm，md和lg的網格大小。

的更多信息，可以發現here

Answer 2

使用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) { 

    }