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

如何缩放内容以适应屏幕的宽度

  • 772

考虑这个例子：我手动将 body 的缩放设置为 60%，以便 #content div 水平适合屏幕（#content div 不能换行或滚动）。

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

    解决方案是通过javascript操作CSS Scale类并做一个简单的计算

    $(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