10

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

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

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

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

4

3 に答える 3

15

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

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

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

ここに画像の説明を入力

更新 - Chrome ツール

この回答からしばらく経ちましたFirefox. のモバイル開発ツールは完全に変更されておらず、大幅にGoogle Chromes変更されており、非常に素晴らしいので、まだ使用していない人に共有しないのはばかげているようです.

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

Chrome でモバイル開発ツールを有効にする方法

これにより、次のようなモバイル開発ツールが開きます 痛いほどの愛らしさ

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

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

于 2014-01-31T11:37:17.560 に答える
6

このフィドルのように

$(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);
}
​

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

于 2012-12-10T00:38:35.050 に答える
1

これをブックマークとして置くことができます。(できれば) クロスブラウザーで動作するはずです。ディスプレイをクリックして、それを取り除きます。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;
    };
})()​
于 2012-12-10T01:23:25.440 に答える