显示当前屏幕尺寸 - 响应式设计工具

Question

我目前正在进行大量的响应式设计开发，所有前端开发人员都在做这件事。

有一件事我很想知道，那就是当前屏幕尺寸的确切大小。

Chrome 可以实现： https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

如何在Firefox中显示当前屏幕尺寸？

- Jamie Hutber

---

屏幕尺寸还是浏览器尺寸？ - bfavaretto

浏览器大小...用于响应式设计和媒体查询 - Jamie Hutber

在Opera中显示浏览器的尺寸是一个设置，已经存在多年了（几乎可以确定它在6版本中就有了）。 - cimmanon

他们是好孩子 :) 令人沮丧的是，Firefox不支持此功能，而Chrome在检查和查看元素样式时也会显示哪个媒体查询处于活动状态。 - Jamie Hutber

Answer 1

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

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

快捷键是Cntrl+Shift+M，您将进入一个出色的移动视图，可以完全控制屏幕大小，同时仍然能够打开开发工具。

更新- Chrome工具

自这个答案以来已经过了一段时间，而且由于Firefox的移动开发工具并没有发生太大变化，Google Chrome发生了很多变化，所以分享给那些还没有使用过它的人似乎是很愚蠢的。

按下F12，然后会打开以下窗口，接着点击小的移动图标即可呼出移动开发工具：

这将打开移动设备开发工具，看起来像这样：

在这里，您可以更改各种设置，但很容易在预定义的设备之间进行切换，并自动为您设置用户代理。

此外，您还可以更改触摸、地理位置等等。

- Jamie Hutber

---

不知道这个。它对我很有帮助。谢谢。 - 10now

Answer 2

Like this 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);
}
​

编辑：同时添加了屏幕尺寸，使用您需要的任何内容！

- adeneo

---

谢谢，我考虑编写一个插件来实现这个功能，只需在调整大小时漂亮地显示在角落里即可。也许我必须这样做...但是我真的想要一种漂亮而不会干扰的方式来显示它。 - Jamie Hutber

这只是一点CSS，你会很容易地弄清楚那部分，并以任何你喜欢的方式进行样式设置。类似于这个-> FIDDLE - adeneo

是的，我几个月前写过一个，但我懒得维护它，因为它不够简洁和美观。我只是希望有一个像Chrome那样的Firefox插件，而不是我花一整天时间来编写这个东西。 - Jamie Hutber

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

- Stuart