2012-12-10 7 views
10

Ich mache eine Menge an responsive Design-Entwicklung im Moment, wie alle Front-End-Devs sind.Display aktuelle Bildschirmgröße - Responsive Design-Tools

Eine Sache, die ich gerne wissen würde, ist die genaue aktuelle Bildschirmgröße.

Chrome hat es: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Wie kann ich die aktuelle Bildschirmgröße mit Firefox angezeigt werden?

+0

Bildschirmgröße oder Browsergröße? – bfavaretto

+0

Browsergröße ... für Responsive Designs und Medienabfragen –

+0

Das Anzeigen der Browser-Dimensionen ist eine Einstellung in Opera, die es seit Jahren gibt (fast schon in Version 6). – cimmanon

Antwort

16

Es ist eine sehr alte Frage, aber erwähnenswert.

Firefox hat jetzt "Responsive Design Mode" Welches ist die beste Reaktion auf antwortende Tests, die ich in jedem Browser gesehen habe.

die Verknüpfung ist Cntrl+Shift+M und Sie sind in einer fantastischen mobilen Ansicht mit vollständiger Kontrolle über die Größe des Bildschirms, während immer noch in der Lage, die Dev-Tools zu öffnen.

enter image description here

Update - Chrome Werkzeuge

Seine seit dieser Antwort eine Weile her, und da Firefox ‚s Handy-Entwicklungs-Tools nicht eine ganze Menge geändert haben, haben Google Chromes eine ganze Menge und geändert so fantastisch, es wäre albern, nicht für diejenigen zu teilen, die es noch nicht benutzt haben.

Hit F12 dann wird dies öffnen, dann drücken Sie die kleine mobile Symbol, um die mobilen Entwicklungs-Tools zu bringen:

How to Enable Mobile Dev Tools on Chrome

Damit werden die mobilen Entwickler-Tools öffnen, die wie dieses Such lovelyness it hurts

sieht

Von hier aus können Sie alle möglichen Dinge ändern, aber einfach zwischen Geräten mit den vordefinierten Geräten und Benutzeragenten, die automatisch für Sie eingerichtet werden.

Mehr über Sie können Dinge ändern, wie Touch, Geolocation usw.

+0

wusste nicht darüber. Es hilft mir sehr. Vielen Dank. – 10now

5

Gefällt Ihnen dieses 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: hinzugefügt Bildschirmgröße als auch, verwenden, was Sie brauchen!

+0

Danke, ich dachte darüber nach, ein Plugin zu schreiben, um genau das zu tun, nur um es schön zu zeigen und in der Ecke, nur wenn ich die Größe verändere .... Könnte ich das tun müssen ...Aber ich bin wirklich auf eine nette, nicht aufdringliche Art und Weise, es zu zeigen, sehen Sie. –

+0

Das ist nur ein bisschen CSS, du wirst den Teil einfach finden und stylen, wie auch immer du es magst? Etwas wie das -> [** FIDDLE **] (http://jsfiddle.net/krWLA/4/) – adeneo

+0

ye, ich schrieb ein paar Monate zurück, aber ich konnte nicht belästigt werden, es zu behalten, so wie es war nicht sauber oder nett. Ich habe nur auf ein Firefox-Plugin gehofft, wie ich schon sagte, Chrome hat eins. Anstatt dass ich einen Tag damit verbringe, dieses Ding zu schreiben. –

1

Sie können dies als Lesezeichen setzen. Es sollte (hoffentlich) cross-browserfähig sein. Klicken Sie auf das Display, um es loszuwerden. 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; 
    }; 
})()​