web-dev-qa-db-ja.com

vhおよびvwユニットを機能させるためのクロスブラウザーjavascriptはありますか

注：Okこの質問を入力している間、私は遭遇しました this@media queryしかし、2011年に再び尋ねられました...

ご存知のように、CSS3は新しい ビューポートのパーセンテージの長さの単位 、vhおよびvwを導入します。これにJavaScript/jQueryの代替手段はありますか？フォントサイズに使用する以外に、要素のサイズ設定に使用しても安全ですか？例のように

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

Update 5：.css（property）fix fancyBox のようなプラグインは.css('margin-right')を使用して要素の右マージンと.css('margin-right', '12px')を取得して、要素の右マージンを設定します。 propsが文字列であり、複数の引数が指定されているかどうかのチェックがなかったため、これは壊れていました。 propsが文字列かどうかを確認して修正しました。その場合、複数の引数がある場合、引数はオブジェクトに書き換えられます。それ以外の場合、parseProps( $.extend( {}, props ) )は使用されません。

更新4：レスポンシブレイアウトのプラグイン https://github.com/elclanrs/jquery.columns （作業中）

これを（長い）試しました。最初にCSSの例を示します： http://jsbin.com/orajac/1/edit#css 。 （出力パネルのサイズを変更します）。少なくとも最新のChromeでは、font-sizeはビューポートユニットでは機能しないことに注意してください。

そして、これがjQueryでこれを行う試みです。フォントでも動作するjQueryデモは、 http://jsbin.com/izosuy/1/edit#javascript にあります。広範囲にテストしていませんが、値をピクセルに変換するだけで、window.resizeでプラグインを呼び出すことで更新を続けるため、ほとんどのプロパティで動作するようです。

更新：多くのブラウザで動作するようにコードを更新しました。 Chrome=以外のものを使用している場合は、jsBinがwindow.resizeで少し奇妙に動作するため、ローカルでテストします。

更新2：ネイティブcssメソッドを拡張します。

更新3：プラグイン内でwindow.resizeイベントを処理して、統合がシームレスになりました。

Gist（ローカルでテストするため）：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

私はこの問題に直面していますAndroid 4.3ストックブラウザ（vw、vhなどをサポートしていません）。これを解決する方法は、 'rem'をフォントサイズの単位として使用し、 JavaScriptを使用して<html>のフォントサイズを変更する

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

あなたのCSSでは、px、emsなどの代わりに「rem」を使用できます

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

コードのデモは次のとおりです。 http://jsfiddle.net/4ut3e/

14
Alexandru Bangală

この問題に対処する小さなヘルパーを作成しました。すべてのメインブラウザーでサポートされ、jQueryを使用します。
ここにあります：

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

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>

GitHubで入手できます。
https://github.com/kgadzinowski/Support-Css-Vh-Vw

JSFiddleの例： http://jsfiddle.net/5MMWJ/2/

7
Konrad G

Vminpoly は、私が知っている唯一のポリフィルです。開発中ですが、この投稿の時点で機能しています。 Jquery Columns および -prefix-free プロジェクトの一部として、静的なポリフィルもあります。

4
RobW

私は非常にいですが、このWITH PURE CSS（JSは不要）のために完全に機能する回避策を作成しました。ネイティブAndroid Browser（バージョン4.3以下ではサポートしていません）のために書き換える必要がある 'vw'宣言（高さおよびtop/bottomプロパティ用）でいっぱいのCSSスタイルシートに出会いました「vw」単位）。

親の幅を基準にしてすべてをパーセントに書き換える代わりに（DOMの深部で最も複雑な計算）、最初の{height：Xvw}宣言に到達する前でも頭痛の種になります。次のスタイルシート： http://splendige.pl/vw2rem.css

あなたはすべて「em」ユニットに精通していると思います（そうでない場合： http://www.w3schools.com/cssref/css_units.asp ）。いくつかのテストの結果、古いAndroidブラウザー（および他のすべてのブラウザー）が 'rem'ユニットを完全にサポートしていることを発見しました。フォントサイズの宣言（ほとんどの場合、htmlタグ）。

したがって、この作業を行う最も簡単な方法は、ビューポートの幅の1％に等しいhtmlタグのfont-sizeを宣言することでした。 1920pxビューポートでは19.2pxで、1920-320pxの範囲全体で多くのメディアクエリを使用します。このようにして、すべての解像度で 'rem'ユニットを 'vw'に等しくしました（ステップは10ピクセルですが、1ピクセルごとにhtml {font-size}を宣言することもできます）。次に、「vw」を「rem」でバッチ置換し、Android 4.3ネイティブブラウザーでの作業レイアウトを賞賛しました。

さらに、bodyタグ全体（px、em、ptなど）でもfont-sizeを再宣言できます。スタイルシート全体で 'rem'と 'vw'の等価性には影響しません。

お役に立てれば。私はそれがちょっとばかげているように見えますが、魅力のように動作します。覚えておいてください：何かが愚かに見えるが、機能する場合、それは愚かではありません:)

2
k0m0r

「jquery.columns」はこれまでのところ最良のソリューションです。

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

「vh」を「all-browser scale」に変えるのに必要なコードは2行だけです。

Htmlでクラスを宣言します。

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

次に、javascriptで：

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

ビューポートに関連するディメンションの使用を容易にする小さなライブラリを公開しました。ポリフィルではないことに注意してください。そのため、サイズを変更する要素にクラスを適用する必要があります。例えば、 <div class="vh10 vw30">hello</div>は、高さの10％と幅の30％を埋めます。

チェックしてください： https://github.com/joaocunha/v-unit

0
João Cunha

私が見つけた最も簡単でエレガントな解決策は、高さのあるdivを作成することです。および幅：1vw;ページが読み込まれると、それらの値をgetBoundingClientRect（）でピクセルとして取得します。次に、ドキュメントにリスナーを追加して画面のサイズ変更をリッスンし、画面のサイズ変更時にサイズを更新します。

値をvhとvwのピクセルで保存し、vhを使用する必要があるときは常に100 * vhと言うだけで100vhになります。

これが実装のコードスニペットです。私の答えはVanilla jsで、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