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

【问题标题】：Display current screen size - Responsive Design tools显示当前屏幕尺寸 - 响应式设计工具
【发布时间】：2012-11-27 10:11:40
【问题描述】：

我目前正在进行大量响应式设计开发，所有前端开发人员也是如此。

我很想知道当前屏幕的确切尺寸。

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

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

【问题讨论】：

屏幕大小还是浏览器大小？
浏览器大小...用于响应式设计和媒体查询
显示浏览器的尺寸是 Opera 中已经存在多年的设置（几乎肯定是在版本 6 中）。
他们是好孩子 :) 令人沮丧的是 firefox 没有，此外，当检查和查看元素样式时，chrome 还会在开发工具栏中显示哪些媒体查询处于活动状态。

标签： javascript css firefox responsive-design browser-plugin

【解决方案1】：

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

Firefox 现在有“Responsive Design Mode”，这是我在任何浏览器上见过的最好的响应式测试。

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

更新 - Chrome 工具

自从这个答案以来已经有一段时间了，因为Firefox 的移动开发工具并没有改变整个交易，Google Chromes 已经改变了很多并且太棒了，如果不分享给那些还没用过。

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

这将打开如下所示的移动开发工具

您可以在此处更改各种内容，但可以在设备之间轻松更改，并为您自动设置预定义设备和用户代理。

您可以更改更多内容，例如触摸、地理位置等

【讨论】：

对此一无所知。它对我有很大帮助。谢谢。

【解决方案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);
}

编辑：还添加了屏幕尺寸，随心所欲！

【讨论】：

谢谢，我想过写一个插件来做这个确切的事情，只有在调整大小时才能很好地显示它并且在角落里......也许我必须这样做......但真的我' m 在你看到的一种很好的非侵入性显示方式之后。
这只是一个小 CSS，你会很容易地弄清楚那部分，并根据你的喜好设置它的样式吗？像这样 -> FIDDLE
是的，几个月前我写了一篇，但我懒得保存它，因为它不干净也不好看。我只是希望有一个像我说的那样的 Firefox 插件，chrome 有一个。而不是我花一天时间写这个东西。

【解决方案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;
    };
})()

【讨论】：