So zoomen Sie den Inhalt auf die Bildschirmbreite

Question

Betrachten Sie dieses Beispiel: Ich habe den Body-Zoom manuell auf 60% eingestellt, damit #content div horizontal passt. (Das Inhalts-Div darf nicht umgeblättert oder gescrollt werden und der Inhalt ist nicht auf Text beschränkt) sie enthält mehr divs, Tabellen, Spannweiten, usw. In dem Beispiel verwendete ich den Text nur den Überlauf)

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>

zu demonstrieren Wie kann ich es verkleinern oder verkleinere sie passen die Bildschirmbreite automatisch? Kannst du mich auf ein Beispiel oder Quellen hinweisen?

Ich habe über css @viewport und jquery ui scale funcion lesen, aber ich kann es nicht funktionieren.

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

Answer 1

Hier ist eine einfachere Methode ausführen: Verwenden Sie Javascript, um die CSS-Skala Klasse zu manipulieren:

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

Answer 2

Haben Sie versucht: #content{font-size:1.2vw;}. Die Einheit vw passt sich an die Bildschirmbreite an (es gibt auch eine vh Einheit, die sich an die Bildschirmhöhe anpasst). Stellen Sie die Größe richtig ein und die Schrift sollte immer auf eine geeignete Größe verkleinert werden.

Die Einheit vw teilt die Bildschirmbreite in 100 Einheiten und ordnet die Größe basierend auf der gewünschten Anzahl an Einheiten zu. Ähnlich wie Prozent, aber nicht abhängig von Eltern.See this explanation at CSS-Tricks

Wechseln Sie alternativ zu CSS-Medienabfragen.Sie funktionieren wie folgt aus:

/*========== 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;} 
} 

Ressourcen:

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

Bootstrap 3 breakpoints and media queries

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

Answer 3

Denn jetzt werde ich meine eigene Hack verwenden:

1. Holen Sie sich das gerenderte Breite des Elements
2. einen < Stil anhängen> -Element im Header
3. dieses Element erhalten Sie die @viewport Klasse
4. Einfügen mit 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>

gerade hinzugefügt

Das Snippet hier funktioniert nicht, das Skript wird von blockiert diese Website, aber es funktioniert, wenn Sie es in Ihrer Maschine