10

我目前正在做很多响应式设计开发，所有前端开发人员也是如此。

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

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

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

4

3 回答 3

15

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

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

快捷方式是Cntrl+Shift+M，您在一个奇妙的移动视图中，可以完全控制屏幕的大小，同时仍然能够打开开发工具。

在此处输入图像描述

更新 - Chrome 工具

自从这个答案以来已经有一段时间了，因为Firefox's 的移动开发工具并没有改变整个交易，Google Chromes已经改变了很多并且非常棒，如果不与那些还没有使用它的人分享似乎很愚蠢。

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

如何在 Chrome 上启用移动开发工具

这将打开看起来像这样的移动开发工具 如此可爱让人心疼

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

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

于 2014-01-31T11:37:17.560 回答
6

喜欢这个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);
}
​

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

于 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 回答