web-dev-qa-db-ja.com

JavaScriptはビューポートの幅/高さで計算します

私は自分のモバイルWebviewにレスポンシブポイントを設定しようとしており、これを行いました：

var w = window.innerWidth-40;
var h = window.innerHeight-100;

これは今のところうまくいきます。ただし、値-40および-100は、ビューポートのスケーリングの高さと幅にはありません。

私がこれをするとき：

var w = window.innerWidth-40vw;
var h = window.innerHeight-100vh;

ビューポートに対して応答性を維持する必要があるため-JSは機能しなくなりました。 vhとvwはCSSでのみ機能すると思いますか？ JSでこれをどのように達成できますか？

JQueryソリューションは不要-JSのみ！

ありがとう

javascriptcssviewport
11
Tobias Alt

このサイト に基づいて、javascriptに次の関数を記述して、目的の値を計算できます。

function vh(v) {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  return (v * h) / 100;
}

function vw(v) {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return (v * w) / 100;
}

function vmin(v) {
  return Math.min(vh(v), vw(v));
}

function vmax(v) {
  return Math.max(vh(v), vw(v));
}
console.info(vh(20), Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
console.info(vw(30), Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
console.info(vmin(20));
console.info(vmax(20));

私はコードで this 信じられないほどの質問を使用しました！

15
Yashar Aliabbasi

これを試して：

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

リファレンス： http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

2
Arun V K

問題は、JSに40vhがないことです。最初に40vhのピクセル数を計算して使用してください。 1000 - 40vhを実行するとエラーがスローされます

40vhは40 % of viewport heightを意味します。だからwindow.innerHeight * 0.4 == 40vh

また、whなどはなく、vh（ビューポートの高さの％）のみです。

2
Justinas

これはCSSを使用できる私の解決策です。

    // calc dynamic customer device height/width
    let vh = window.innerHeight * 0.01,
        vw = window.innerWidth * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
    document.documentElement.style.setProperty('--vw', `${vw}px`);

CSSでの使用方法

このメソッドで100vhまたは100vwを使用する場合は、互換性のないブラウザに対して100vh/100vwを設定する必要があります。

例;

.wrapper{
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.slide-container{
    height: calc(var(--vh, 1vh) * 100 - var(--menuHeight) - var(--footerHeight));
}

.little-image{
    width: calc(var(--vw, 1vw) * 5);
    margin-bottom: calc(var(--vh, 1vh) * 1);
}

/* and more.. */
0
Fatih Mert Doğancan

これを行う最も簡単な方法は、ページを完全に編集できる場合、次のように-40vwと-100vhを持つcssクラスを作成することです。

CSS：

.class{
    width: -40vw;
    height: -100vh;
}

JS：

element.classList.add("class");

注：「classList」はInternet Explorer 9ではサポートされていません。すべてのブラウザーで機能させる場合は、代わりにこれをJSに使用してください。

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}
0
Weslbyno19

あなたは私が思うに引用符でそれを囲む必要があるだけです。 var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"

0
user11331664