Question

根据browserstack，这些是三星Galaxy S7的规格：

Screen Size 5.1 in - 2.5 x 4.4 in
Resolution 1440 x 2560 px
Viewport 360 x 640 dp

在此设备上，我的页面显示在超小的引导布局或默认布局中，因为（我认为）设备报告的视口为360px。但由于分辨率较高，我宁愿将平板电脑布局加载为1440 / 1.5 -> 960。

我的印象是bootstrap默认情况下这样做。我的实现中有什么问题或这是默认行为吗？如果是默认值：如何更改高分辨率设备的布局以在平板电脑中渲染而不是使用引导程序进行额外的小屏幕布局？（但当然要为真正的小型设备（即旧手机）保留额外的小布局）

Answer 1

您有两种定位高dpi设备的方法：1）使用CSS，2）使用JS。

1）使用CSS

您应该添加一个媒体查询，根据您的需要更改Bootstrap类的默认行为。因此，如果您的布局应该有2列（.col-sm-6比768px高50％），即使浏览器说您的高dpi设备应该呈现为一列（.col-sm-6的宽度为100％，低于768px）），你可以这样做：

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
        .col-sm-6 {
            float: left;
            width: 50%;
        }
    }

您可以详细了解此方法in this Gist。

2）使用JavaScript（我个人选择）

您不必触摸任何CSS，因此您可能不会遇到意外行为。在页面加载时，只需将视口初始比例更改为设备的像素比率。

假设你已经有了这个：

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

您的脚本将是这样的：

document.addEventListener('load', function() {
    var scale = 1 / (window.devicePixelRatio || 1);
    var content = 'width=device-width, initial-scale=' + scale;

    document.querySelector('meta[name="viewport"]').setAttribute('content', content)
}, false)

其中有this approach的精髓。

Answer 2

您回答了自己的问题，有效viewport size for Galaxy S7 is 360x640。因此，它属于xs breakpoint of 768px or less。

最简单的选择是create a custom grid通过官方发电机。

高分辨率设备显示超小的引导程序布局

2 个答案:

1）使用CSS

2）使用JavaScript（我个人选择）