Chrome не показывает ширину и высоту экрана при проверке страницы с помощью Inspect

Ответ 1

Начиная с мая 2012 года, Chrome снова имеет эту функциональность. размеры экрана

Ответ 2

По-видимому, он был удален в одном из последних обновлений, однако вы можете получить доступ к режиму Toggle device, нажав F12, а затем нажав Ctrl + Shift + M.

Если вам не нравится этот способ, вы можете использовать этот пример на основе javascript, который скажет вам текущую ширину окна:

var onresize = function() 
{
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   console.log(width);
}

Нажмите F12, а затем нажмите Esc, чтобы увидеть консоль.

На основе этого ответа: fooobar.com/questions/942/...

Ответ 3

Это определенно полезная функция, которую они удалили. К счастью, есть расширение Chrome, которое вы можете использовать для достижения той же функциональности:

Загрузить здесь: Размеры видовых экранов

Перезагрузите браузер после установки. Наслаждайтесь!

Ответ 4

Я использую аккуратный маленький трюк, который я узнал сам. Просто держите курсор на body node в инспекторе, чтобы он постоянно выделялся при изменении размера. Я действительно надеюсь, что они реинтегрируют эту функциональность.

Вот изображение для пояснения:

Ответ 5

Я создал расширение Chrome, чтобы имитировать старый стиль с шириной X в верхнем правом углу, который БЕСПЛАТНО для всех. Здесь ссылка на плагин (расширения FYI не работают на странице плагинов Chrome, поэтому не беспокойтесь): https://chrome.google.com/webstore/detail/width-and-height-display/hhcddohiohbojnfdmfpbbhiaompeiemo?hl=en-US&gl=US

Вот скриншот:

В качестве альтернативы я взял @Joefay и @Micah (спасибо!) ответ сверху и сделал небольшой визуальный эффект в верхнем правом углу, поэтому вам не нужно открывать консоль после ввода кода в консоль. Вам придется вставлять его каждый раз при открытии нового окна или обновлении страницы. Надеюсь, это поможет.

var onresize = function() {
   var width = window.innerWidth
   || document.documentElement.clientWidth
   || document.body.clientWidth;
   var height = window.innerHeight
   || document.documentElement.clientHeight
   || document.body.clientHeight;
   var container = document.getElementById('heightAndWidth');
   container.innerHTML = width + ' x ' + height;
};

(function addHAndWElement() {
    var cssString = 'position:fixed;right:8px;top:8px;z-index:20000;background:rgba(0,0,0,0.6);color:#FFF;padding:4px;'
    var htmlDoc = document.getElementsByTagName('body');
    var newDiv = document.createElement('div');
    var divIdName = 'heightAndWidth';
    newDiv.setAttribute('id',divIdName);
    newDiv.style.cssText = cssString;
    htmlDoc[0].appendChild(newDiv);
    onresize();
})();

Ответ 6

Функция не была удалена, теперь есть другой способ доступа к ней.

• Перейдите в Chrome Dev Tools
• Переключить вид устройства (Command + Shift + M/Ctrl + Shift + M)

3. Затем в раскрывающемся меню выберите вариант "Отзывчивый"

После этого вы сможете изменить размер окна взад и вперед, наблюдая, как точно будет выглядеть размер окна.

Надеюсь, это поможет!

Ответ 7

TL; DR Убедитесь, что консоль разработчика открыта с вкладки текущего изменения размера.

Это может звучать как: face-palm: для многих людей, но я отключился на нескольких консолях разработчика, которые были открыты, но не видя размеры окна при изменении размера, никаких изменений в настройках.

Ответ: у меня было открыто две вкладки Chrome, и каждая вкладка, по-видимому, имеет собственную консоль разработчика. Он не переключается при переключении вкладок. Следовательно, я изменил размер активного окна на оба вкладки, но поскольку вкладка, в которой я открывала консоль, неактивна, я не видел своих измерений.

Ответ 8

Он может вернуться в Chrome. Если вы используете Chrome Canary, у него все еще есть та же функция.

Я использую версию 52.0.2707.0 canary

https://www.google.com/chrome/browser/canary.html