[英]Display current screen size - Responsive Design tools
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显示当前屏幕尺寸?
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+M
and 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 Chromes
have 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 F12
then 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 更多的东西你可以改变一些东西,比如触摸,地理位置等
$(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! 编辑:增加屏幕尺寸,使用你需要的任何东西!
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;
};
})()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.