高分辨率设备显示超小 bootstrap 布局

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

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

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

Answer 1

您回答了自己的问题，有效viewport size for Galaxy S7 is 360x640. Thus, it falls within the xs breakpoint of 768px or less。

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

Answer 2

您有两种定位高 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，因此您很可能不会出现意外行为。在页面加载时，只需将视口 initial-scale 更改为设备的像素比。

假设你已经有了这个：

<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的精髓。

高分辨率设备显示超小 bootstrap 布局

high resolution devices display extra small bootstrap layout

css

grid-layout

hdpi

responsive-design

twitter-bootstrap

1) 与 CSS

2）与JavaScript（个人选择）