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

similar [How to calculate CSS zoom factor in dependence on screen width?](https://stackoverflow.com/questions/58642798/how-to-calculate-css-zoom-factor-in-dependence-on-screen-width) — milahu, Feb 12 '22 at 08:16

score 9 · Accepted Answer · answered Apr 24 '16 at 19:46

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>

score 5 · Answer 2 · edited May 23 '17 at 10:28

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

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, Apr 13 '16 at 18:13
Thanks I used the scale class, your post is useful though, thanks +1 — The One, Apr 24 '16 at 19:48

The One · Answer 3 · 2016-04-14T12:27:58.713

For now I'm going to use my own hack:

Get the rendered width of the element
Append a < style > element in the header
Get that element you just added
Insert the @viewport class with width= renderedwith

$(document).ready(function() {
      var width = document.getElementById('content').offsetWidth;
      $("head").append('<style type="text/css"></style>');
      var viewPortElement = $("head").children(':last');
      viewPortElement.html('@viewport{width:' + width + 'px}');
    });

#content {
  overflow-x: hidden;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

The snippet here doesn't work, the script is getting blocked by this website but it works if you run it in your machine

How to zoom content to screen width

3 Answers3