显示当前屏幕大小 - 响应式设计工具

Question

我正在做很多响应式设计开发，就像所有前端开发人员一样。

我想知道的一件事是当前的屏幕尺寸。

Chrome有它： https ： //chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

如何使用Firefox显示当前屏幕尺寸？

Answer 1

这是一个非常古老的问题，但值得一提。

Firefox现在具有“ 响应式设计模式 ”，这是我在任何浏览器上看到的响应性测试的最佳选择。

快捷键是Cntrl+Shift+M ，你可以在一个梦幻般的移动视图中完全控制屏幕的大小，同时仍然可以打开开发工具。

更新 - Chrome工具

自从这个答案以来已经有一段时间了，因为Firefox的移动开发工具没有改变整个交易， Google Chromes已经改变了很多，并且非常精彩，如果不分享那些尚未使用过它的人，那就太愚蠢了。 。

点击F12然后这将打开，然后点击小移动图标以显示移动开发工具：

这将打开看起来像这样的移动开发工具

从这里您可以更改各种事物，但可以轻松地在具有预定义设备和自动为您设置的用户代理的设备之间进行更改。

更多的东西你可以改变一些东西，比如触摸，地理位置等

Answer 2

喜欢这个FIDDLE

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

编辑：增加屏幕尺寸，使用你需要的任何东西！

Answer 3

你可以把它作为书签。 它应该（希望）跨浏览器工作。 点击显示屏即可摆脱它。 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;
    };
})()​