0

こんにちは仲間のコードの人々:)

私はフロントエンド Web 開発者であり、レスポンシブ デザインのブレークポイントの開始位置と終了位置を確認するために、実際のビューポート サイズを常に把握しておく必要があります。FF 独自の「テスト ウィンドウ サイズ」機能は知っていますが、非常に便利な拡張機能である FireSizer に出会いました。この拡張機能には、ちょっとした欠点が 1 つあります。FF の境界線とスクロールバーを含むウィンドウ サイズが返されます。ただし、ビューポートサイズが必要です。したがって、拡張機能をハッキングする必要がありますが、そうするのに十分な javaScript を知りません。多分誰かがここで彼らを助けてくれますか？

拡張機能で実際にスクロールバーを探し、幅から a) スクロールバーが存在しない場合は 14、b) スクロールバーが存在する場合は 30 を減算することをお勧めします

コードを変更するのに適切な場所だと思うものを見つけました：

//
// Update the status bar panel with the current window size
//
function FiresizerUpdateStatus() {
    var width  = window.outerWidth  + ''; // <- Think code needs to be edited here
    var height = window.outerHeight + '';
    document.getElementById("firesizer-statuspanel").label = width + 'x' + height;
}

ありがとうございます！あお

@Chen Asraf: どうもありがとう。ドキュメント幅を呼び出す要素があるとは知りませんでした。コードを次のように変更すると、うまくいきました（また、FF独自の「レスポンシブデザインビューモード」と比較すると、スポットオンで、2pxオフです-clientWidthから減算します。）

function FiresizerUpdateStatus() {
var width  = window.outerWidth  + ''; // changed this line to:
var width  = document.documentElement.clientWidth-2 + '';
var height = window.outerHeight + '';
document.getElementById("firesizer-statuspanel").label = width + 'M' + height;
}

ありがとうございます

4

1 に答える 1

0

JavaScript を使用してブラウザのビューポートの寸法を取得するの重複の可能性

次を使用して、ウィンドウの内側の寸法を取得できるようです。

// My window is maximized; screen is 1366x768

alert(document.documentElement.clientWidth);
// ^ returns 1349 (17 missing pixels because of scrollbar)

alert(document.documentElement.clientHeight);
// ^ returns 643 (125 pixels missing because of start bar & Chrome toolbars)

次に、以下を必要なものと比較できます (たとえば、クライアントの幅とウィンドウの幅を比較して、その差がスクロールバーになるのに十分な大きさであるかどうかを調べます。サイズを試してみてください)。

于 2013-08-25T13:19:07.297 に答える