937

訪問者に高品質の画像を表示できるようにしたいのですが、ウィンドウのサイズを検出する方法はありますか?

それとも、JavaScript を使用したブラウザのビューポート サイズですか? 緑のエリアはこちら：

4

17 に答える 17

1567

クロスブラウザ @media (width)と@media (height)値 

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidthとwindow.innerHeight

document.documentElement.clientWidthと.clientHeight

資力

于 2012-01-16T05:23:11.690 に答える
117

jQuery ディメンション関数

$(window).width()と$(window).height()

于 2009-08-08T06:01:22.467 に答える
88

window.innerWidthおよびwindow.innerHeightプロパティを使用できます。

innerHeight と outerHeight

于 2009-08-08T06:39:12.733 に答える
35

jQuery を使用していない場合、見苦しくなります。すべての新しいブラウザで動作するはずのスニペットを次に示します。動作は、IE の Quirks モードと標準モードで異なります。これはそれを処理します。

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
于 2009-08-08T06:20:10.510 に答える
19

私はクロスブラウザの方法を見て見つけました：

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

于 2014-05-30T09:07:01.847 に答える
16

これには受け入れられる答えがあることはわかっていますが、clientWidthiPhone（少なくとも私のもの）が320ではなく980を返したため、うまくいかない状況に遭遇したので、window.screen.width. 私は既存のサイトに取り組んでおり、「レスポンシブ」になり、より大きなブラウザーに別のメタビューポートを使用させる必要がありました。

これが誰かの役に立てば幸いです。完璧ではないかもしれませんが、iO と Android での私のテストでは機能します。

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
于 2013-08-12T19:12:47.987 に答える
12

モバイルの仮想ピクセルで正しい値を提供するjQuery 以外のソリューションを探していて、単純であるwindow.innerHeightかdocument.documentElement.clientHeight問題を解決できると思われる場合は、最初にこのリンクを検討してください: https://tripleodeon.com/assets/2011/12/ table.html

開発者は問題を明らかにする適切なテストを行いました。Android/iOS、横向き/縦向き、通常/高密度ディスプレイで予期しない値が得られる可能性があります。

私の現在の答えはまだ特効薬ではなく (//todo)、このスレッドから製品コードに特定のソリューションをすばやくコピーして貼り付けようとしている人への警告です。

モバイルで仮想ピクセル単位のページ幅を探していましたが、動作するコードは (予期せず!) だけであることがわかりましたwindow.outerWidth。後で時間があるときに、ナビゲーション バーを除く高さを与える正しい解決策について、この表を調べます。

于 2014-05-13T17:12:30.840 に答える
11

このコードはhttp://andylangton.co.uk/articles/javascript/get-viewport-size-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' ] };
}

注意：幅を読み取るには、使用しますconsole.log('viewport width'+viewport().width);

于 2012-12-31T08:01:04.333 に答える
10

と の間には違いがwindow.innerHeightありdocument.documentElement.clientHeightます。1 つ目は、水平スクロールバーの高さです。

于 2013-02-16T21:31:36.807 に答える
7

W3C 標準に準拠するソリューションは、透明な div を作成し (たとえば、JavaScript で動的に)、幅と高さを 100vw/100vh (ビューポート単位) に設定し、offsetWidth と offsetHeight を取得することです。その後、要素を再度削除できます。ビューポート ユニットは比較的新しいため、これは古いブラウザーでは機能しませんが、ビューポート ユニットを気にせず、代わりに (間もなく) 標準を気にする場合は、間違いなく次のようにすることができます。

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

もちろん、objNode.style.position = "fixed" を設定してから、幅/高さとして 100% を使用することもできます。これにより、同じ効果が得られ、互換性がある程度向上します。また、位置を固定に設定することは、一般的には良い考えかもしれません。そうしないと、div は非表示になりますが、スペースが消費され、スクロールバーが表示されるなどの原因となります。

于 2013-05-05T21:16:18.360 に答える
4

これが私のやり方です。IE 8 -> 10、FF 35、Chrome 40 で試してみました。最新のすべてのブラウザー (window.innerWidth が定義されているため) と IE 8 (ウィンドウなし) で非常にスムーズに動作します。 innerWidth) もスムーズに動作します。問題が発生した場合 (オーバーフローによる点滅など: "hidden")、報告してください。ビューポートの高さにはあまり興味がありません。この関数は、一部のレスポンシブ ツールを回避するためだけに作成したものですが、実装される可能性があります。コメントや提案に感謝します。

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
于 2015-02-24T11:57:56.953 に答える
1

JavaScript のwindow.matchMedia()メソッドを使用するだけで、CSS メディア クエリに基づいてモバイル デバイスを検出できます。これは、モバイル デバイスを検出するための最良かつ最も信頼性の高い方法です。

次の例は、このメソッドが実際にどのように機能するかを示しています。

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>
于 2021-05-15T06:38:15.017 に答える