How to zoom content to fit the width of the screen

Question

How to zoom content to fit the width of the screen

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

Consider this example: Manually I adjusted the zoom of the body to 60% so that the div #content fits horizontally on the screen (The div #content should not wrap or have 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 adjusts to the width of the screen? Can you give me an example or direct me to a tutorial?

I've been reading about @ViewPort and the Jquery scale function but it does not work for me.

html css zoom viewport scale

asked by Tuco 13.04.2016 в 18:11

source

2 answers

2

I've been testing this and it's been pretty good. It is 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>

Adjust the zoom (I call the function 3 times because each time the adjustZoom function is called, it resizes and adjusts itself).

It works well in Chrome but not in FireFox (because scrollWidth does not work as needed here)

answered by 23.04.2016 в 03:56

error in eclipse c ++? How to know if an object is a string [closed]

score 2 · Accepted Answer

The solution was to manipulate the CSS Scale class using 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>