it-swarm.com.de

Gibt es ein browserübergreifendes Javascript, damit vh- und vw-Einheiten funktionieren

Hinweis: Ok während ich diese Frage tippte, stieß ich auf this Frage, die die Verwendung von @media query vorschlägt, wurde aber erneut in 2011 ...

Wie Sie wissen, führt CSS3 neue Viewport-Prozentsatzlängeneinheiten , vh und vw ein, die meines Erachtens wirklich nützlich sind für ein solides responsives Layout. Ist es nicht nur für Schriftgrößen geeignet, sondern auch für die Größenanpassung von Elementen? Wie zum Beispiel

div {
   height: 6vh;
   width: 20vh;  /* Note am using vh for both, do I need to use vw for width here? */
}
48
Mr. Alien

Update 5: .css (Eigenschaft) fix Plugins wie fancyBox Verwenden Sie .css('margin-right'), um den rechten Rand eines Elements abzurufen, und .css('margin-right', '12px'), um den rechten Rand eines Elements festzulegen. Dies war fehlgeschlagen, da nicht geprüft wurde, ob props eine Zeichenfolge ist und ob mehrere Argumente angegeben wurden. Problem behoben, indem überprüft wurde, ob props eine Zeichenfolge ist. Wenn dies der Fall ist und mehrere Argumente vorhanden sind, werden die Argumente in ein Objekt umgeschrieben. Andernfalls wird parseProps( $.extend( {}, props ) ) nicht verwendet.

Update 4: Plugin für responsive Layouts https://github.com/elclanrs/jquery.columns (in Arbeit)

Ich habe es einen (langen) Versuch gegeben. Zunächst das CSS-Beispiel: http://jsbin.com/orajac/1/edit#css . (Größe des Ausgabefeldes ändern). Beachten Sie, dass font-size nicht mit Viewport-Einheiten funktioniert, zumindest nicht auf dem neuesten Chrome. 

Und hier ist mein Versuch, dies mit jQuery zu tun. Die jQuery-Demo, die auch mit der Schriftart funktioniert, befindet sich unter http://jsbin.com/izosuy/1/edit#javascript . Ich habe es nicht ausgiebig getestet, aber es scheint mit den meisten Eigenschaften zu funktionieren, da es nur die Werte in Pixel umwandelt und dann das Plugin über window.resize aufruft, um es zu aktualisieren.

Update: Code wurde für viele Browser aktualisiert. Testen Sie lokal, wenn Sie etwas anderes als Chrome verwenden, da jsBin mit window.resize etwas komisch wirkt.

Update 2: Native css-Methode erweitern.

Update 3: Behandelt das window.resize -Ereignis im Plugin, sodass die Integration jetzt nahtlos erfolgt.

The Gist (lokal testen):https://Gist.github.com/4341016

/*
 * CSS viewport units with jQuery
 * http://www.w3.org/TR/css3-values/#viewport-relative-lengths
 */
;(function( $, window ){

  var $win = $(window)
    , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/[\d.]+/)[0] / 100
      , unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent +'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this
      , originalArguments = arguments
      , update = function() {
          if ( typeof props === 'string' || props instanceof String ) {
            if (originalArguments.length > 1) {
              var argumentsObject = {};
              argumentsObject[originalArguments[0]] = originalArguments[1];
              return _css.call(self, parseProps($.extend({}, argumentsObject)));
            } else {
              return _css.call( self, props );
            }
          } else {
            return _css.call( self, parseProps( $.extend( {}, props ) ) );
          }
        };
    $win.resize( update ).resize();
    return update();
  };

}( jQuery, window ));

// Usage:
$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

15
elclanrs

Ich habe ein Problem mit dem Android 4.3-Standardbrowser (vw, vh usw. wird nicht unterstützt). Ich habe das Problem gelöst, indem Sie 'rem' als Einheit mit Schriftgröße verwenden und die Schriftgröße von <html> mit Javascript dynamisch ändern

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
jQuery(window).resize(function(){
    var vw = (viewport().width/100);
    jQuery('html').css({
        'font-size' : vw + 'px'
    });
});

und in Ihrer CSS können Sie "rem" anstelle von px, ems usw. verwenden

.element {
    font-size: 2.5rem; /* this is equivalent to 2.5vw */
}

Hier ist eine Demo des Codes: http://jsfiddle.net/4ut3e/

14

Ich habe einen kleinen Helfer geschrieben, um dieses Problem zu lösen. Es wird von allen gängigen Browsern unterstützt und verwendet jQuery.
Hier ist es:

SupportVhVw.js

function SupportVhVw() {

    this.setVh = function(name, vh) {

        jQuery(window).resize( function(event) {
            scaleVh(name, vh);
        });

        scaleVh(name, vh);
    }

    this.setVw = function(name, vw) {

        jQuery(window).resize( function(event) {
            scaleVw(name, vw);
        });

        scaleVw(name, vw);
    }

    var scaleVw = function(name, vw) {

        var scrWidth = jQuery(document).width();
        var px = (scrWidth * vw) / 100;
        var fontSize = jQuery(name).css('font-size', px + "px");
    }


    var scaleVh = function(name, vh) {

        var scrHeight = jQuery(document).height();

        var px = (scrHeight * vh) / 100;
        var fontSize = jQuery(name).css('font-size', px + "px");
    }
};

Ein einfaches Beispiel für die Verwendung in HTML:

<head>

    <title>Example</title>

    <!-- Import all libraries -->
    <script type="text/javascript" src="js/libs/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/libs/SupportVhVw.js"></script>

</head>
<body>

                    <div id="textOne">Example text one (vh5)</div>
                    <div id="textTwo">Example text two (vw3)</div>
                    <div id="textThree" class="textMain">Example text three (vh4)</div>
                    <div id="textFour" class="textMain">Example text four (vh4)</div>

            <script type="text/javascript">

                    // Init object
                    var supportVhVw = new SupportVhVw();

                    // Scale all texts
                    supportVhVw.setVh("#textOne", 5);
                    supportVhVw.setVw("#textTwo", 3);
                    supportVhVw.setVh(".textMain", 4);

            </script>

</body>

Es ist auf GitHub verfügbar:
https://github.com/kgadzinowski/Support-Css-Vh-Vw

Beispiel bei JSFiddle: http://jsfiddle.net/5MMWJ/2/

7
Konrad G

Vminpoly ist der einzige Polyfill, den ich kenne - er befindet sich in der Entwicklung, funktioniert aber ab diesem Post. Es gibt auch statische Polyfills als Teil der Projekte Jquery Columns und -prefix-free .

4
RobW

Ich habe gerade einen sehr hässlichen, aber perfekt funktionierenden Workaround für dieses WITH PURE CSS (kein JS benötigt) gemacht..__ Ich bin auf ein CSS-Stylesheet mit 'vw'-Deklarationen (auch für Höhen und Top/Bottom-Eigenschaften) gestoßen Für den nativen Android-Browser (der in den Versionen 4.3 und darunter KEINE "vw" -Einheiten unterstützt) musste er neu geschrieben werden.

Anstatt alles auf Prozentsätze umzuschreiben, die relativ zur Breite der Eltern sind (je tiefer in DOM die kompliziertesten Berechnungen), was mir Kopfschmerzen bereitet, noch bevor ich die erste {height: Xvw} -Deklaration erreichte, erzeugte ich mir das folgendes Stylesheet: http://splendige.pl/vw2rem.css

Ich vermute, Sie kennen sich alle mit 'em' Einheiten aus (falls nicht: http://www.w3schools.com/cssref/css_units.asp ). Nach einigen Tests entdeckte ich, dass alte Android-Browser (wie auch alle anderen) die Rem-Einheiten perfekt unterstützen. Diese funktionieren genauso wie 'em', sind jedoch relativ zur Schriftgröße der ROOT-Elemente (in den meisten Fällen das HTML-Tag).

Der einfachste Weg, dies zu erreichen, bestand also darin, die Schriftgröße für das HTML-Tag festzulegen, die 1% der Breite des Darstellungsbereichs entspricht, z. 19.2px für 1920px-Ansichtsfenster und viele Medienabfragen für den gesamten Bereich von 1920-320px. Auf diese Weise habe ich die "rem" -Einheit in allen Auflösungen gleich "vw" gemacht (Schritt 10px, aber Sie können sogar versuchen, html {font-size} für jeden 1px zu deklarieren). Dann habe ich einfach "vw" durch "rem" ersetzt und das Arbeitslayout in Android 4.3 native Browser bewundert.

Außerdem können Sie die Schriftgröße auch für das gesamte Body-Tag neu definieren (in beliebigen Einheiten: px, em, pt usw.), und es wirkt sich NICHT auf die Rem-Gleichheit von 'vw' im gesamten Stylesheet aus .

Hoffe das hilft. Ich weiß, dass es irgendwie dumm aussieht, aber es wirkt wie ein Zauber. Denken Sie daran: wenn etwas dumm aussieht, aber funktioniert, ist es nicht dumm :)

2
k0m0r

"jquery.columns" ist bisher die beste Lösung.

https://github.com/elclanrs/jquery.columns

Sie benötigen nur zwei Codezeilen, um aus "vh" eine "alle Browser-Skala" zu machen.

Deklarieren Sie eine Klasse in HTML:

<img src="example.jpg" class="width50vh" />

Dann in Javascript:

$('.width50vh').css({width: '50vw'});
1
stonyau

Ich habe eine kleine Bibliothek veröffentlicht, die die Verwendung von Viewport-relativen Dimensionen erleichtert. Denken Sie daran, dass es keine Polyfill ist. Daher müssen Sie Klassen auf die Elemente anwenden, deren Größe Sie ändern möchten. Zum Beispiel füllt <div class="vh10 vw30">hello</div> 10% der Höhe und 30% der Breite.

Check it out: https://github.com/joaocunha/v-unit

0
João Cunha

Die einfachste und eleganteste Lösung, die ich gefunden habe, ist, einfach ein div mit der Höhe zu erstellen: 1vh; und Breite: 1VW; und wenn die Seite geladen wird, werden diese Werte mit getBoundingClientRect () als Pixel erfasst. Fügen Sie dann dem Dokument einen Listener hinzu, um die Größe des Bildschirms zu überwachen und die Größe zu ändern, wenn der Bildschirm seine Größe ändert.

Ich speichere den Wert in Pixeln der vh und vw und wann immer ich vh verwenden muss, würde ich einfach 100 * vh sagen, was mir 100vh geben würde.

Hier ist ein Code-Snippet zur Implementierung, meine Antwort ist in Vanilla js, keine Notwendigkeit für Jquery.

function getViewportUnits(){
  const placeholder = document.getElementById("placeholder");
  const vh = placeholder.getBoundingClientRect().height;
  const vw = placeholder.getBoundingClientRect().width;
  console.log({vh: vh, vw: vw});
}
#placeholder{
  background: red;
  height: 1vh;
  width: 1vw;
}
<body onload="getViewportUnits()">
<div id="placeholder"></div>

0
Chance