53

レスポンシブ テンプレートの場合、CSS にメディア クエリがあります。

@media screen and (max-width: 960px) {
 body{
 /*  something */
 background:red;
 }
}

そして、ログ幅にサイズ変更するための jQuery 関数を作成しました。

$(window).resize(function() {
 console.log($(window).width());
 console.log($(document).width()); /* same result */
 /* something for my js navigation */
}

そして、CSS 検出と JS 結果には違いがあります。私はこのメタを持っています:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>

スクロールバー（15 px）が原因だと思います。どうすればこれを改善できますか？

4

8 に答える 8

72

CSS がデバイスの幅を使用しているのに対し、JS はドキュメントの幅を使用しているためです。

jQuery の width 関数を使用する代わりに、JS コードでビューポートの幅を測定する必要があります。

このコードは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' ] };
}
于 2012-07-03T11:53:51.817 に答える
9

http://www.w3schools.com/js/js_window.aspで次のコードを見つけました。

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

@Michael Birdの回答の回答と実質的に同じように機能しますが、読みやすいです。

編集: css メディア クエリに使用されるのとまったく同じ幅を与える方法を探していました。しかし、提案されたものは、スクロールバーのある Safari では完全には機能しません。申し訳ありません。最終的に、1 つの中心的な機能で modernizr.js を使用し、残りのコードでは、ディスプレイ タイプがモバイル、タブレット、デスクトップのいずれであるかを確認するだけです。私は幅に興味がないので、これは私にとってはうまくいきます：

getDisplayType = function () {
  if (Modernizr.mq('(min-width: 768px)')){
    return 'desktop';
  }
  else if (Modernizr.mq('(min-width: 480px)')){
    return 'tablet'
  }
  return 'mobile';
};
于 2014-03-04T02:16:00.647 に答える
6

window.innerWidth が必要です。

if (window.innerWidth < 768) は CSS の 768 ブレークポイントで機能します

于 2016-05-06T19:47:53.137 に答える
2

常に機能し、CSS メディア クエリと同期される回避策。

body に div を追加する

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

スタイルを追加し、特定のメディア クエリに入力して変更します

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

次に、メディアクエリに入力して変更しているJSチェックスタイルで

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

したがって、通常、特定のメディア クエリを入力することで、変更されているスタイルを確認できます。

于 2015-04-08T15:59:54.943 に答える
1

私の経験では、メディア クエリの幅は document.body.clientWidth を追跡します。垂直スクロール バーが行き来するため、ドキュメント、ウィンドウ、または viewport().width をチェックすると、ウィンドウの高さによっては、メディア クエリ ルールが変更された後、Javascript の実行が遅くなる可能性があります。

document.body.clientWidth を確認すると、メディア クエリ ルールが有効になると同時に、スクリプト コードを一貫して実行できました。

@media (min-width:873px) {
     //いくつかのルール
}
...

if ( document.body.clientWidth >= 873) {
    // コード
}

アンディ・ラングトンのコードは私をこれに追い込みました--ありがとう!

于 2013-05-23T03:24:08.227 に答える
0

CSS メディア クエリは、window.innerWidth と同じです。Css メディア クエリもスクロールバーを計算します。

于 2016-07-05T23:21:46.833 に答える