Недавно я переустановил свой компьютер. Когда вы закончили переустановку всего, что я заметил при использовании, проверьте, что высота и ширина экрана страницы больше не отображаются в верхнем правом углу.
Удалили ли они его или есть секретная настройка, которую я еще не нашел? или, может быть, ошибка? Это сделало мою жизнь намного легче, когда мне пришлось сделать сайт отзывчивым.
Начиная с мая 2012 года, Chrome снова имеет эту функциональность. размеры экрана
По-видимому, он был удален в одном из последних обновлений, однако вы можете получить доступ к режиму 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/...
Это определенно полезная функция, которую они удалили. К счастью, есть расширение Chrome, которое вы можете использовать для достижения той же функциональности:
Загрузить здесь: Размеры видовых экранов
Перезагрузите браузер после установки. Наслаждайтесь!
Я использую аккуратный маленький трюк, который я узнал сам. Просто держите курсор на body node в инспекторе, чтобы он постоянно выделялся при изменении размера. Я действительно надеюсь, что они реинтегрируют эту функциональность.
Вот изображение для пояснения:
Я создал расширение 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();
})();
Функция не была удалена, теперь есть другой способ доступа к ней.
После этого вы сможете изменить размер окна взад и вперед, наблюдая, как точно будет выглядеть размер окна.
Надеюсь, это поможет!
TL; DR Убедитесь, что консоль разработчика открыта с вкладки текущего изменения размера.
Это может звучать как: face-palm: для многих людей, но я отключился на нескольких консолях разработчика, которые были открыты, но не видя размеры окна при изменении размера, никаких изменений в настройках.
Ответ: у меня было открыто две вкладки Chrome, и каждая вкладка, по-видимому, имеет собственную консоль разработчика. Он не переключается при переключении вкладок. Следовательно, я изменил размер активного окна на оба вкладки, но поскольку вкладка, в которой я открывала консоль, неактивна, я не видел своих измерений.
Он может вернуться в Chrome. Если вы используете Chrome Canary, у него все еще есть та же функция.
Я использую версию 52.0.2707.0 canary