устройства с высоким разрешением отображают очень маленькую загрузочную компоновку

Согласно браузерному стеку, это характеристики, скажем, Samsung 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.

У меня сложилось впечатление, что загрузчик делает это по умолчанию. Что-то не так в моей реализации или это поведение по умолчанию? Если это значение по умолчанию: как я могу изменить макеты для устройств с высоким разрешением для отображения на планшете вместо макета дополнительного маленького экрана с загрузкой? (но, конечно, сохраните очень маленькую раскладку для настоящих маленьких устройств, таких как старые телефоны)


css responsive-design twitter-bootstrap grid-layout hdpi
person steros    schedule 10.02.2017    source источник
comment
Можете ли вы включить ссылку на ваш сайт или живой пример?   -  person Serg Chernata    schedule 13.02.2017
comment
getbootstrap.com/examples/grid Попробуйте на этой странице. Это дает такое же поведение. (Что заставляет меня думать, что это поведение по умолчанию)   -  person steros    schedule 13.02.2017

Ответы (2)


arrow_upward
1
arrow_downward

У вас есть два способа настроить таргетинг на устройства с высоким разрешением: 1) с помощью CSS и 2) с помощью JS.

1) С помощью CSS

Вы должны добавить медиа-запрос, который изменяет поведение классов Bootstrap по умолчанию в зависимости от ваших потребностей. Итак, если ваш макет должен иметь 2 столбца (.col-sm-6 на 50% больше 768 пикселей), даже если браузер говорит, что ваше устройство с высоким разрешением должно отображаться как один столбец (.col-sm-6 имеет ширину 100% ниже 768 пикселей). ), ты можешь это сделать:

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

Вы можете прочитать больше об этом подходе в этом 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)

В чем суть этот подход.

person Estevan Maito    schedule 15.02.2017
comment
Я получил комбинацию 2) и это: stackoverflow.com/a/20413768/928666 - person steros; 16.02.2017

arrow_upward
0
arrow_downward

Вы сами ответили на свой вопрос, эффективный размер окна просмотра для Galaxy S7 – 360x640. Таким образом, он попадает в xs точку останова 768px или меньше.

Самый простой вариант — создать пользовательскую сетку с помощью официального генератора.

person Serg Chernata    schedule 13.02.2017
comment
Да, но это только половина вопроса. - person steros; 13.02.2017
comment
Обновил ответ. - person Serg Chernata; 13.02.2017