引导程序-使页面无响应，并向所有设备显示桌面版本

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的网格大小。

更多信息可以在这里找到