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

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);
}
?

编辑:增加屏幕尺寸,使用你需要的任何东西!