Home / Questions / 7687
Accepted
The One
Asked: 2020-04-14 08:11:37 +0800 CST 2020-04-14 08:11:37 +0800 CST

Как масштабировать контент по ширине экрана

  • 772

Рассмотрим следующий пример: я вручную установил масштаб тела на 60%, чтобы элемент div #content располагался горизонтально на экране (элемент div #content не должен сворачиваться или прокручиваться).

body{

  zoom:60%
  
}


#content{
  overflow-x: hidden;
  white-space: nowrap;
}
<div id="content">
THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA
</div>

Как уменьшить или уменьшить масштаб содержимого, чтобы оно автоматически соответствовало ширине экрана? Можете ли вы привести пример или направить меня к учебнику?

Я читал о @ViewPort и функции масштабирования jquery, но у меня это не работает.

html

3 Answers

  1. Best Answer

    Решение заключалось в том, чтобы манипулировать классом CSS Scale через javascript и выполнять простые вычисления.

    $(document).ready(function(){


var width = document.getElementById('hijo').offsetWidth;
            var height = document.getElementById('hijo').offsetHeight;
            var windowWidth = $(document).outerWidth();
            var windowHeight = $(document).outerHeight();
            var r = 1;
            r = Math.min(windowWidth / width, windowHeight / height)

            $('#hijo').css({
                '-webkit-transform': 'scale(' + r + ')',
                '-moz-transform': 'scale(' + r + ')',
                '-ms-transform': 'scale(' + r + ')',
                '-o-transform': 'scale(' + r + ')',
                'transform': 'scale(' + r + ')'
            });

});
    #padre{
   overflow-x: visible;
  white-space: nowrap;
      
  }


#hijo{
  left: 0;
    position: fixed;
    overflow: visible;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
     transform-origin: top left;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="padre">
       <div id="hijo">
         THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA
       </div>
  </div>

    • 3

  2. Я тестировал это, и это работает довольно хорошо. Не префект:

    <html>
<head>
<style>
#content{
  overflow-x: hidden;
  white-space: nowrap;
}
</style>
</head>
<body>
<div id="content">
THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA OTHER
</div>
<script>
function adjustZoom(){
    var newZoomCss = 'zoom:'+document.documentElement.clientWidth*100/content.scrollWidth+'%; ';
    var truncUpTo = 0;
    var firstNL = document.body.style.cssText.indexOf(';');
    if(firstNL && document.body.style.cssText.substr(0,5)==='zoom:'){
        truncUpTo = firstNL;
    }
    document.body.style.cssText = newZoomCss + document.body.style.cssText.substr(truncUpTo);
}
window.addEventListener('resize', function(){
    adjustZoom();adjustZoom();adjustZoom();
});
window.addEventListener('load', function(){
    adjustZoom();adjustZoom();adjustZoom();
});
</script>
</body>
</html>

    Настраивает масштаб (я вызываю функцию 3 раза, потому что каждый раз, когда вызывается функция AdjustZoom, она изменяет размер и настраивается сама).

    Он отлично работает в Chrome, но не в FireFox (потому что scrollWidth здесь не работает так, как нужно)

    • 2

  3. Какую переменную я мог бы разместить, чтобы содержимое настраивалось либо на ширину «clientWidth», либо на высоту «clientHight» в зависимости от того, является ли экран книжным или альбомным?

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

    Код, который я поставил, таков:

    <script>
function adjustZoom(){
    var newZoomCss = 'zoom:'+document.documentElement.clientHeight*100/content.scrollHeight+'%; ';
    var truncUpTo = 0;
    var firstNL = document.body.style.cssText.indexOf(';');
    if(firstNL && document.body.style.cssText.substr(0,5)==='zoom:'){
        truncUpTo = firstNL;
    }
    document.body.style.cssText = newZoomCss + document.body.style.cssText.substr(truncUpTo);
}
window.addEventListener('resize', function(){
    adjustZoom();adjustZoom();adjustZoom();
});
window.addEventListener('load', function(){
    adjustZoom();adjustZoom();adjustZoom();
});
</script>
    • 0