Question

我有一个很好的chrome（'Window Resizer'）扩展显示视口大小，但我不知道如何在不使用鼠标的情况下清除chrome中的缓存，所以我倾向于使用Safari进行浏览器开发

我看了一下，我似乎找不到在Safari中显示视口大小的扩展程序（我可以找到允许我设置视口大小的各种扩展，但是当我改变时没有显示它手动）。

有没有人知道这样做的免费扩展？

Answer 1

这个免费的Safari Extensions在调整大小时显示视口宽度和高度：

https://github.com/kevinoes/viewportSize-safari-extension

Answer 2

如果您需要当前大小，一种简单的方法是打开Web Inspector（Cmd-Alt-I）。选择<html>节点。然后单击右侧的“度量标准”检查器以查看当前视口宽度/高度。如果您正在调整窗口大小，这不会非常快速地更新，但仍然可以估计大小。

Answer 3

我遇到的一个解决方案是使用名为http://www.resizemybrowser.com的网站。

我在safari中的另一个标签中打开了这个标签，并参考它来获取当前的视口大小。

Answer 4

我知道这个问题很老，但这就是我的工作。它可能对某人有帮助。

只需使用一点jquery：

$(window).resize(function(){
    var viewportWidth = $(window).width();
    var ems = viewportWidth / parseFloat($("body").css("font-size"));
    $('#viewport').html(viewportWidth+" | "+ems);
});

然后有点css

#viewport {
  background: #000000;
  bottom: 0;
  right: 15px;
  position: fixed;
  z-index: 100;
  color: $white;
}

羞耻safari不像chrome那样工作并向你展示，但我只是坚持每一个项目并且效果很好。我倾向于在#viewport div上加上一些逻辑，只显示我是否已登录，因此它不会影响实时网站

Answer 5

Safari的开发工具现在具有“进入响应式设计模式”。如果您已启用开发工具，请转到Safari的工具栏开发＆gt;进入响应式设计模式。

是否有Safari的免费扩展程序显示视口大小

5 个答案: