引导 - 使页面不响应并显示桌面版本的所有设备

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

    }