Адаптивный дизайн: есть ли способ автоматически увеличивать и уменьшать мой сайт до высоты, а не ширины окна? - PullRequest
Новая
       34

Адаптивный дизайн: есть ли способ автоматически увеличивать и уменьшать мой сайт до высоты, а не ширины окна?

0 голосов
/ 23 января 2020

У меня есть веб-сайт с контентом. Например, он имеет высоту 900px и ширину 1014px. На мобильных телефонах et c. размер рекламы автоматически адаптируется к ширине экрана, и если высота превышает, дисплей просто прокручивается. Но я хочу, чтобы он адаптировался к высоте, а не к ширине страницы / экрана.

Я хочу сделать это таким образом, потому что на большинстве мобильных устройств мой контент слишком длинный по высоте, что является проблемой, и если он немного короче по ширине, то это не проблема, потому что я просто есть пробел влево и вправо.

Заранее спасибо Cyknos

Эдит: Так вот несколько примеров кода (мне не разрешено показывать исходный код):

HTML (Тело): 

<div class="content">
  //here are some images, other divs and much more 
</div>

CSS: 

.content {
    position: absolute;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
    height: 910px;
}

Два примера, чтобы описать, как это сейчас:

  1. Если Окно / экран имеет размер 1200 пикселей по ширине и только 800 пикселей по высоте, переполнение выполняется только при видимой прокрутке -> это нормально.

  2. Если бы Windoe / Screen имел размер 900 пикселей в ширину и 1000 пикселей в высоту, он «уменьшил бы» мою страницу, поэтому содержимое отверстия было бы видимым -> это тоже нормально.

Моя цель: Моя цель состоит в том, чтобы, если высота окна / экрана становилась меньше, чем высота содержимого ->, то должно происходить то же самое, что и обычно пример 2

1 Ответ

0 голосов
/ 27 января 2020

Вот мое решение (Пример кода): 

var result = [];
var isFirefox = typeof InstallTrigger !== 'undefined';
var contentHeight = 800; //your content
function bodySizing() {
    if(window.innerHeight < contentHeight) {
        var diff = contentHeight-window.innerHeight;
        var multiplValue = diff/contentHeight;
        var scale = 1-multipleValue;

        if(scale<1) { //only downsizing, no upsizing
            $('body').css('zoom', scale);
            $('body').css('-moz-transform', 'scale('+scale+')');
            $('body').css('-o-transform', 'scale('+scale+')');

            if(isFirefox) {
                $('body').css("background-size", result[0]*scale+"px " + result[1]*scale + "px");
            } else {
                $('body').css("background-size", result[0]+"px " + result[1] + "px");
            }   
        }    
    }
}

РЕДАКТИРОВАТЬ: Добавлено FF-Fix

...