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

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

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

我的印象是引导程序默认执行此操作。 我的实现有问题还是这是默认行为？ 如果是默认值： 如何更改高分辨率设备的布局以在平板电脑中呈现，而不是使用引导程序进行超小屏幕布局？ （但当然要为真正的小型设备（即旧手机）保留额外的小布局）

Answer 1

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

1) 使用 CSS

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

@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。因此，它属于xsbreakpoint of 768px or less。

您可以使用的最简单的选择是通过官方生成器create a custom grid。