html - 如何将内容缩放到屏幕宽度

Question

考虑这个例子:为了使#content div 水平对齐，我手动将 body 缩放比例调整为 60%，(内容 div 不能换行或滚动，内容不限于文本，它包含更多的 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>

如何缩小或缩小它以自动适应屏幕宽度？你能给我指出一个例子或来源吗？

我读过有关 css @viewport 和 jquery ui scale funcion 的文章，但我无法让它工作。

(在 3、2、1... 中投反对票)

Answer 1

这里有一个更简单的方法:使用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>