Como hacer zoom al contenido para que se ajuste al ancho de la pantalla

publicado por: Anonymous

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)

_x000D_

_x000D_

body{_x000D_
_x000D_
  zoom:60%_x000D_
  _x000D_
}_x000D_
_x000D_
_x000D_
#content{_x000D_
  overflow-x: hidden;_x000D_
  white-space: nowrap;_x000D_
}

_x000D_

<div id="content">_x000D_
THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA_x000D_
</div>

_x000D_

_x000D_

_x000D_

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.

solución

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

_x000D_

_x000D_

$(document).ready(function(){_x000D_
_x000D_
_x000D_
var width = document.getElementById('hijo').offsetWidth;_x000D_
            var height = document.getElementById('hijo').offsetHeight;_x000D_
            var windowWidth = $(document).outerWidth();_x000D_
            var windowHeight = $(document).outerHeight();_x000D_
            var r = 1;_x000D_
            r = Math.min(windowWidth / width, windowHeight / height)_x000D_
_x000D_
            $('#hijo').css({_x000D_
                '-webkit-transform': 'scale(' + r + ')',_x000D_
                '-moz-transform': 'scale(' + r + ')',_x000D_
                '-ms-transform': 'scale(' + r + ')',_x000D_
                '-o-transform': 'scale(' + r + ')',_x000D_
                'transform': 'scale(' + r + ')'_x000D_
            });_x000D_
_x000D_
});

_x000D_

#padre{_x000D_
   overflow-x: visible;_x000D_
  white-space: nowrap;_x000D_
      _x000D_
  }_x000D_
_x000D_
_x000D_
#hijo{_x000D_
  left: 0;_x000D_
    position: fixed;_x000D_
    overflow: visible;_x000D_
    -moz-transform-origin: top left;_x000D_
    -ms-transform-origin: top left;_x000D_
    -o-transform-origin: top left;_x000D_
    -webkit-transform-origin: top left;_x000D_
     transform-origin: top left;_x000D_
    -moz-transition: all .2s ease-in-out;_x000D_
    -o-transition: all .2s ease-in-out;_x000D_
    -webkit-transition: all .2s ease-in-out;_x000D_
     transition: all .2s ease-in-out;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="padre">_x000D_
       <div id="hijo">_x000D_
         THIS CONTENT HAS TO FIT HORIZONTALLY ON SCREEN, THIS CONTENT CAN'T WRAP NOR SCROLL BLA BLA BLA BLA BLA BLA BLA_x000D_
       </div>_x000D_
  </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *