css - 高分辨率设备显示超小的 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 像素的视口(viewport)。但由于分辨率较高，我宁愿将平板电脑布局加载为 1440/1.5 -> 960。

我的印象是 bootstrap 默认执行此操作。我的实现有问题还是这是默认行为？如果是默认值:如何更改高分辨率设备的布局以在平板电脑中呈现而不是使用 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，因此您很可能不会出现意外行为。在页面加载时，只需将视口(viewport)初始比例更改为设备的像素比率。

假设你已经有了这个:

<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 .