How to zoom content to screen width

Question

Consider this example: I manually adjusted the body zoom to 60% in order to make #content div fit horizontally, (The content div must not wrap or scroll and the content is not restricted to text, it contains more divs, tables, spans, etc. In the example I used the text just to demonstrate the overflow)

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 it out or scale it down to fit the screen width automatically? Can you point me to an example or sources?

I've reading about css @viewport and jquery ui scale funcion but I can't make it work.

(Downvotes in 3, 2, 1...)

Solution 1

Here's a simpler method: use Javascript to manipulate the CSS scale class:

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

Solution 2

Have you tried: #content{font-size:1.2vw;}. The vw unit will adjust to screen width (there is also a vh unit that adjusts to screen height). Get the size right and it should always shrink the font to an appropriate size.

The vw unit divides the screen width into 100 units, and assigns size based on desired number of units. Similar to percent, but not reliant on parent. See this explanation at CSS-Tricks

Alternately, explore CSS media queries. They work like this:

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
    #content{font-size:8px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    #content{font-size:9px;}
}

/* Small Devices, Tablets */
    #content{font-size:10px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #content{font-size:12px;}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    #content{font-size:14px;}
}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    #content{font-size:14px;}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    #content{font-size:12px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #content{font-size:10px;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
    #content{font-size:9px;}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    #content{font-size:8px;}
}

Resources:

https://css-tricks.com/viewport-sized-typography/

Bootstrap 3 breakpoints and media queries

https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Comments

[The One]

Sorry I wasn't clear enough, the content is not restricted to text, it contains more divs, tables, spans, etc. In the example I used the text just to demonstrate the overflow

[The One]

Thanks I used the scale class, your post is useful though, thanks +1