Existe-t-il un javascript multi-navigateur pour faire fonctionner les unités vh et vw ?

Question

Note : Ok, pendant que je rédigeais cette question, je suis tombé sur este question qui suggère d'utiliser @media query mais on lui a demandé de revenir en 2011...

Comme vous le savez, CSS3 introduit de nouvelles Unités de longueur en pourcentage de la fenêtre de visualisation , vh y vw Ma question est donc la suivante : existe-t-il une alternative JavaScript/jQuery pour cela ? De plus, à part l'utiliser pour la taille des polices, est-il possible de l'utiliser pour dimensionner des éléments ? Par exemple

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

Answer 1

Mise à jour 5 : .css(propriété) fixe Des plugins comme fancyBox utiliser .css('margin-right') pour récupérer la marge droite d'un élément et .css('margin-right', '12px') pour définir la marge droite d'un élément. Ceci était cassé, car il n'y avait pas de vérification si props est une chaîne de caractères et s'il y a plusieurs arguments donnés. Je l'ai corrigé en vérifiant si props est une chaîne de caractères. Si c'est le cas et qu'il y a plusieurs arguments, arguments est réécrit en un objet, sinon parseProps( $.extend( {}, props ) ) n'est pas utilisé.

Mise à jour 4 : Plugin pour les mises en page réactives https://github.com/elclanrs/jquery.columns (en cours de réalisation)

J'ai fait un (long) essai. Tout d'abord, voici l'exemple CSS : http://jsbin.com/orajac/1/edit#css . (redimensionner le panneau de sortie). Notez que le font-size ne fonctionne pas avec les unités d'affichage, du moins sur la dernière version de Chrome.

Et voici ma tentative de faire cela avec jQuery. La démo de jQuery qui fonctionne aussi avec la police est à http://jsbin.com/izosuy/1/edit#javascript . Je ne l'ai pas testé de manière approfondie mais cela semble fonctionner avec la plupart des propriétés puisqu'il s'agit simplement de convertir les valeurs en pixel et ensuite d'appeler le plugin sur window.resize il ne cesse de se mettre à jour.

Mise à jour : Code mis à jour pour fonctionner avec de nombreux navigateurs. Testez localement si vous utilisez autre chose que Chrome car jsBin se comporte un peu bizarrement avec window.resize .

Mise à jour 2 : Élargir le champ d'application de la norme css méthode.

Mise à jour 3 : Gestion de l'événement window.resize à l'intérieur du plugin, de sorte que l'intégration est maintenant transparente.

L'essentiel (à tester localement) : 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'
});

Answer 2

Je suis confronté à ce problème avec le navigateur stock d'Android 4.3 (ne prend pas en charge vw, vh, etc.). La façon dont j'ai résolu le problème est d'utiliser 'rem' comme unité de taille de police et de changer dynamiquement la taille de police de < html > avec javascript.

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'
    });
});

et dans votre css, vous pouvez utiliser 'rem' au lieu de px, ems, etc.

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

Voici une démo du code : http://jsfiddle.net/4ut3e/

Answer 3

J'ai écrit une petite aide pour gérer ce problème. Il est supporté par tous les principaux navigateurs et utilise jQuery.
C'est ici :

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");
    }
};

Exemple simple d'utilisation en 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>

Il est disponible sur GitHub :
https://github.com/kgadzinowski/Support-Css-Vh-Vw

Exemple sur JSFiddle : http://jsfiddle.net/5MMWJ/2/

Answer 4

Vminpoly est le seul polyfill que je connaisse - il est en cours de développement mais fonctionne à ce jour. Il y a des polyfills statiques dans le cadre de l'application Colonnes Jquery y -sans préfixe également des projets.

Answer 5

J'ai publié une petite lib qui facilite la fenêtre d'affichage-dimensions relatives à l'utilisation. Gardez à l'esprit ce n'est pas un polyfill, donc il faut que vous appliquez les classes sur les éléments que vous souhaitez redimensionner. Par exemple, <div class="vh10 vw30">hello</div> remplira 10% de la hauteur et de 30% de la largeur.

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