Javascript 显示当前屏幕尺寸 - 响应式设计工具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13793469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display current screen size - Responsive Design tools
提问by Jamie Hutber
I'm doing a lot of responsive design development at the moment, as are all front-end devs.
我目前正在做很多响应式设计开发，所有前端开发人员也是如此。
One thing i would love to know is the exact current screen size.
我想知道的一件事是确切的当前屏幕尺寸。
Chrome has it: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
Chrome 有它：https: //chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
How can I display the current screen size with Firefox?
如何使用 Firefox 显示当前屏幕尺寸？
回答by Jamie Hutber
Its a very old question but worth mentioning.
这是一个非常古老的问题，但值得一提。
Firefox now has "Responsive Design Mode" Which is the best to doing responsive testing that I've seen on any browser.
Firefox 现在有“响应式设计模式”，这是我在任何浏览器上见过的最好的响应式测试模式。
the shortcut is Cntrl+Shift+Mand you're in a fantastic mobile view with complete control over the size of the screen whilst still being able to open the dev tools.
快捷方式是Cntrl+Shift+M，您可以在出色的移动视图中完全控制屏幕的大小，同时仍然可以打开开发工具。
Update - Chrome Tools
更新 - Chrome 工具
Its been a while since this answer and since Firefox's mobile development tools haven't changed a whole deal, Google Chromeshave changed a whole lot and are so fantastic it would seem silly not to share for those that haven't already used it.
自从这个答案以来已经有一段时间了，因为它Firefox的移动开发工具并没有改变整个交易，Google Chromes已经改变了很多并且非常棒，对于那些还没有使用过它的人来说，不分享它似乎很愚蠢。
Hit F12then this will open, then hit the small mobile icon to bring up the mobile development tools:
点击F12然后打开，然后点击移动小图标，调出移动开发工具：
This will open the mobile dev tools which looks like this
这将打开看起来像这样的移动开发工具
From here you can change all sorts of things, but easily between devices with the pre-defined devices and user-agents automatically set for you.
从这里您可以更改各种内容，但可以轻松地在具有预定义设备和自动为您设置的用户代理的设备之间进行更改。
More over you can change things, like touch, geo-location etc
此外，您还可以更改内容，例如触摸、地理位置等
回答by adeneo
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);
}
?
EDIT:added screen size as well, use whatever you need!
编辑：也增加了屏幕尺寸，使用任何你需要的！
回答by Stuart
You can put this as a bookmark. It should (hopefully) work cross-browser. Click on the display to get rid of it. http://jsfiddle.net/krWLA/8/
你可以把它作为书签。它应该（希望）跨浏览器工作。单击显示以摆脱它。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;
};
})()?
