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

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

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 и функция scale Jquery, но оно я не функционирует.

1
задан 13.04.2016, 19:11
2 ответа

Решение состояло в том, чтобы манипулировать классом 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>
2
ответ дан 24.11.2019, 14:36

Я это тестировал и пройди достаточно добра. Он не префект:

<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
ответ дан 24.11.2019, 14:36
  • 1
    Спасибо, ты можешь помещать это в JSFiddle или Plunker или давать возможность этому как snippet? – The One 24.04.2016, 22:25
  • 2
    Utilize класс scale, но твоего метода также полезным, спасибо +1 – The One 24.04.2016, 22:49
  • 3
    Возможно помещать в JSFiddle, но не будут видеть хорошо. Нуждается в том, чтобы поместить это эксперт и # 237; в файле .js в мишени и открывать это с браузером. Потом менять tama и # 241; или окна браузера, чтобы видеть c и # 243; mo функционируй. – Emilio Platzer 24.04.2016, 22:54