如何在Chrome控制台打开时显示屏幕尺寸？

Question

我刚刚升级到Chrome的最新版本（49.0.2623.87）。我注意到一个轻微的功能缺失。

如果我在打开控制台的情况下检查页面，并且我调整了浏览器的大小，则在Chrome的右上角，Chrome用于显示浏览器视口大小的小指示。现在已经不见了。我如何取回它？

Answer 1

临时解决方案：

1-右键单击开发人员工具（元素）中的html元素

2-点击网站内部窗口

Answer 2

已知错误，已修复：https://bugs.chromium.org/p/chromium/issues/detail?id=582421

它应该落在M50。如果您需要它，那么它目前在Canary（与标准Chromes并排）或者您可以使用Chrome的开发频道。

Answer 3

在50版本中修复了错误，但现在是临时解决方案：

$(document).ready(function() {
    showSize = ShowSize($(window).width(), $(window).height());
    $(window).resize(function() {
        showSize($(window).width(), $(window).height());
    });
});
function ShowSize(winW, winH){
    var scrollBarWidth = winH < $(document).find('body') ? 17 : 0; 
    $('body')
        .find(".size-window")
        .remove()
        .end()
        .append('<div class="size-window">'+(winW + scrollBarWidth) +' x '+winH+'</div>')
        .find(".size-window")
        .css({
            position: 'fixed',
            right: '10px',
            top: '10px',
            color: '#fff',
            background: 'rgba(0,0,0,0.5)',
            padding: '5px'
        });
    return function(winW, winH){
        scrollBarWidth = winH < $(document).find('body') ? 17 : 0;
        $('body').find(".size-window").text(winW+ scrollBarWidth +' x '+winH);
    }
}

Answer 4

<?php

error_reporting(E_ALL);

 if($loop->have_posts()): ?>

    <?php while($loop->have_posts()) : $loop->the_post();
            ?>
            <div class="col-lg-3 col-md-4 col-sm-6 p-0 scale-anm" data-aos="fade-zoom">
            <a href="<?php the_post_thumbnail_url('full'); ?>" data-toggle="lightbox" data-gallery="example-gallery">
            <img src="<?php the_post_thumbnail_url('full'); ?>" class="img-responsive" /></a>
        </div>
      <?php endwhile; ?>
     <?php endif; ?>
<? endforeach; ?>

只要您想检查窗口大小，请运行function winSize() { console.log(` Inner Width: ${this.innerWidth} Inner Height: ${this.innerHeight} Outer Width: ${this.outerWidth} Outer Height: ${this.outerHeight} `);} winSize(); 。 请注意，您可以使用控制台中的向上/向下箭头键滚动您使用的命令。

Answer 5

（Chrome 64）

1. 打开Chrome开发工具（F12）
2. 虽然您正在调整大小，请注意右上角，您会看到一个小的Chrome样式通知，显示当前窗口大小将很快消失