高分辨率设备显示额外的小引导程序布局 [英] high resolution devices display extra small bootstrap layout

问题描述

根据浏览器堆栈，这些是三星Galaxy S7的规格:

According to browserstack these are the specs for say Samsung 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.

On this device my page displays in the extra small bootstrap layout or default layout because (I think) the device reports a viewport of 360px. But due to the high resolution I'd rather prefer it to load the tablet layout as 1440 / 1.5 -> 960.

我在印象引导程序的默认情况下会执行此操作. 我的实现存在问题吗?还是这是默认行为? 如果是默认值: 如何更改高分辨率设备的布局以在平板电脑中呈现，而不是使用引导程序来生成超小的屏幕布局? (但是，当然要为真正的小型设备(也称为旧手机)保留较小的布局)

I was under the impression bootstrap does this by default. Is something faulty in my implementation or is this the default behavior? If it is the default: how can I change layouts for high resolution devices to render in tablet instead of extra small screen layout with bootstrap? (but of course keep the extra small layout for real small devices aka old phones)

推荐答案

您有两种针对高dpi设备的定位方式:1)使用CSS，2)使用JS.

You have two ways of targeting high dpi devices: 1) with CSS, and 2) with JS.

您应该添加一个媒体查询，该查询可以根据需要更改Bootstrap类的默认行为.因此，即使您的版面应该有2栏(.col-sm-6为768px以上的50％)，即使浏览器说您的高dpi设备应呈现为一栏(.col-sm-6的宽度低于768px的100％ )，您可以这样做:

You should add a media query that changes the default behavior of Bootstrap's classes based on your needs. So, if your layout should have 2 columns (.col-sm-6 is 50% above 768px) even when the browser says your high dpi device should be rendering as one column (.col-sm-6 has 100% width below 768px), you can do this:

@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%;
        }
    }

您可以在此要点中进一步了解 .

You can read more about this approach in this Gist.

您无需接触任何CSS，因此很可能不会出现意想不到的行为.在页面加载时，只需将视口的初始比例更改为设备的像素比例即可.

You don't have to touch in any CSS, so chances are you are not going to have unexpected behavior. On page load, just change the viewport initial-scale to the device's pixel ratio.

假设您已经拥有这个:

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

具有此方法.

这篇关于高分辨率设备显示额外的小引导程序布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！