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

How to zoom content to fit the width of the screen

  • 772

Consider this example: I manually set the body's zoom to 60% so that the #content div fits horizontally on the screen (The #content div must not wrap or 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>

How can I zoom out or make the content smaller so that it automatically fits the width of the screen? Can you give me an example or direct me to a tutorial?

I've been reading about @ViewPort and jquery's scale function but it doesn't work for me.

html

3 Answers

  1. Best Answer

    The solution was to manipulate the CSS Scale class through javascript and doing a simple calculation

    $(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. I've been testing this and it works pretty well. Not Prefect:

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

    Adjusts the zoom (I call the function 3 times because every time the adjustZoom function is called it changes the size and adjusts itself).

    It works fine in Chrome but not in FireFox (because the scrollWidth doesn't work as needed here)

    • 2

  3. What variable could I place so that the content adjusts to either the width "clientWidth" or the height "clientHight" depending on whether the screen is portrait or landscape?

    I put the following code and it works perfectly on horizontal screen, however on vertical screen the content is cut off.

    The code I put is this:

    <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