web-dev-qa-db-ja.com

現在の画面サイズを表示する-レスポンシブデザインツール

現在、すべてのフロントエンド開発者と同様に、レスポンシブデザインの開発を数多く行っています。

私が知りたいことの1つは、正確な現在の画面サイズです。

Chromeにはそれがあります： https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Firefoxで現在の画面サイズを表示するにはどうすればよいですか？

javascriptcssfirefoxresponsive-designbrowser-plugin
10
Jamie Hutber

それは非常に古い質問ですが、言及する価値があります。

Firefoxに「 レスポンシブデザインモード 」が追加されました。これは、どのブラウザでも見たレスポンシブテストを実行するのに最適です。

ショートカットはCntrl+Shift+Mそして、開発ツールを開くことができながら、画面のサイズを完全に制御できる素晴らしいモバイルビューが表示されます。

enter image description here

更新-Chromeツール

この回答からしばらく経ち、Firefoxのモバイル開発ツールが全体を変えていないので、Google Chromes大きく変化し、とても素晴らしいので、まだ使用していない人には共有しないのはばかげているようです。

ヒットF12次にこれが開き、小さなモバイルアイコンを押して、モバイル開発ツールを表示します。

How to Enable Mobile Dev Tools on Chrome

これにより、次のようなモバイル開発ツールが開きます Such lovelyness it hurts

ここから、あらゆる種類のものを変更できますが、事前定義されたデバイスとユーザーエージェントが自動的に設定されているデバイス間で簡単に変更できます。

さらに、タッチ、地理的位置などを変更できます

16
Jamie Hutber

このように [〜＃〜]フィドル[〜＃〜]

$(window).on('resize', showSize);

showSize();

function showSize() {
    $('#size').html('HEIGHT : '+$(window).height()+'<br>WIDTH : '+$(window).width());
    $('#size2').html('HEIGHT : '+screen.height+'<br>WIDTH : '+screen.width);
}
​

編集：画面サイズも追加しました。必要なものを使用してください。

6
adeneo

これをブックマークとして置くことができます。それは（うまくいけば）クロスブラウザで動作するはずです。それを取り除くためにディスプレイをクリックしてください。 http://jsfiddle.net/krWLA/8/

(function() {
    var v=window,d=document;
    v.onresize = function() {
        var w = v.innerWidth ? v.innerWidth :
                d.documentElement.clientWidth,
            h = v.innerHeight ? v.innerHeight : 
                d.documentElement.clientHeight,
            s = d.getElementById('WSzPlgIn'),
            ss;
        if (!s) {
            s = d.createElement('div');
            s.id = 'WSzPlgIn';
            d.body.appendChild(s);
            s.onclick = function() {
                s.parentNode.removeChild(s)
            };
            ss = s.style;
            ss.position = 'absolute';
            ss.bottom = 0;
            ss.right = 0;
            ss.backgroundColor = 'black';
            ss.opacity = '.5';
            ss.color = 'white';
            ss.fontFamily = 'monospace';
            ss.fontSize = '10pt';
            ss.padding = '5px';
            ss.textAlign = 'right';
        }
        s.innerHTML = 'w ' + w + '<br />h ' + h;
    };
})()​
1
Stuart