How to zoom content to fit the width of the screen
Consider this example: I manually zoomed the body to 60% so that the # content div fits horizontally on the screen (the #content div should 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 adjusts to the width of the screen? Can you mention an example or direct me to a tutorial?
I've been reading about @ViewPort and the scale function of Jquery but it doesn't work for me.
3 answers
I've been trying this out and it's going 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>
Adjust the zoom (I call the function 3 times because every time the adjustZoom function is called it resizes and goes self-adjusting).
Works fine in Chrome but not in FireFox (because it doesn't scrollwidth as needed here)
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>What variable could I place so that the content fits the width "clientWidth" or the height "clientHight" depending on the vertical or horizontal screen?
I put the following code and it works perfectly in horizontal screen, however in vertical screen the content is cut.
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>