Отображать текущий размер экрана - Ревизионные инструменты проектирования

В настоящий момент я делаю много гибкого дизайна, как и все интерфейсные разработчики.

Одна вещь, которую я хотел бы узнать, - это точный текущий размер экрана.

В Chrome есть: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Как отобразить текущий размер экрана с помощью Firefox?

Ответ 1

Это очень старый вопрос, но стоит упомянуть.

В Firefox теперь есть Режим адаптивного дизайна. Это лучшее, что можно сделать для гибкого тестирования, которое я видел в любом браузере.

ярлык Cntrl+Shift+M, и вы находитесь в фантастическом мобильном представлении с полным контролем над размером экрана, в то время как все еще можете открывать инструменты для разработчиков.

Обновление - Инструменты Chrome

Прошло некоторое время с момента этого ответа, и поскольку Firefox мобильные средства разработки не изменили целую сделку, Google Chromes сильно изменились и настолько фантастичны, что было бы глупо не делиться для тех, t уже использовал его.

Нажмите 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);
}

EDIT: добавьте размер экрана, используйте все, что вам нужно!

Ответ 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;
    };
})()