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

Question

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

我很想知道的是当前的屏幕大小。

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

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

Answer 1

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

Firefox现在有“Responsive Design Mode”这是我在任何浏览器上看到的响应式测试的最佳选择。

快捷方式是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;
    };
})()​