2

Considera este ejemplo: Manualmente ajusté el zoom del body a 60% para que el div #content quepa horizontalmente en la pantalla (El div #content no debe hacer wrap ni tener 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>

Como puedo sacar el zoom o hacer mas chico el contenido de manera que se ajuste automaticamente al ancho de la pantalla? Puedes mencionarme un ejemplo o dirigirme a un tutorial?

He estado leyendo sobre @ViewPort y la funcion scale de Jquery pero no me funciona.

4
  • Deseas el texto siempre en una sola linea, pero obviamente el tamaño de texto puede cambiar, es así?
    – Jorgesys
    el 13 abr. 2016 a las 17:46
  • El texto es un ejemplo, el contenido puede ser cualquier cosa, mas DIVs, tablas, etc.
    – The One
    el 13 abr. 2016 a las 17:47
  • 1
    El contenido puede crecer hacia los lados, pero quisiera que automaticamente se diera zoom y quede siempre al ancho de la pantalla
    – The One
    el 13 abr. 2016 a las 17:48
  • Además de mi respuesta aconsejo probar con github.com/tombigel/detect-zoom el 23 abr. 2016 a las 2:00

3 respuestas 3

3

La solucion fue manipular la clase CSS Scale mediante javascript y haciendo un simple calculo

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

2

Estuve probando esto y anda bastante bien. No es prefecto:

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

Ajusta el zoom (llamo a la función 3 veces porque cada vez que se llama a la función adjustZoom cambia el tamaño y se va autoajustando).

Funciona bien en Chrome pero no en FireFox (porque no anda el scrollWidth como se necesita acá)

3
  • Gracias, lo puedes poner en JSFiddle o Plunker o habilitarlo como snippet?
    – The One
    el 24 abr. 2016 a las 19:25
  • Utilize la clase scale, pero tu metodo tambien es util, gracias +1
    – The One
    el 24 abr. 2016 a las 19:49
  • Se puede poner en JSFiddle pero no se va a ver bien. Se necesita ponerlo así en un archivo .js en blanco y abrirlo con el navegador. Luego cambiar el tamaño de la ventana del navegador para ver cómo funciona. el 24 abr. 2016 a las 19:54
0

¿Qué variable podría colocar para que el contenido se ajuste al ancho "clientWidth" o bien al alto "clientHight" según sea la pantalla vertical u horizontal?

Puse el código siguiente y funciona perfectamente en pantalla horizontal, sin embargo en pantalla vertical el contenido queda cortado.

El código que puse es este:

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.