是否有显示视口大小的 Safari 的免费扩展答案

【问题标题】：Is there a free extension for Safari that displays the viewport size是否有显示视口大小的 Safari 的免费扩展
【发布时间】：2014-01-29 07:05:28
【问题描述】：

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

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

有谁知道这样做的免费扩展程序？

【问题讨论】：

请不要投票关闭。这是一个有效的问题。 Safari 是开发人员使用的工具，如指南的第一部分所述，可以在此处询问 - stackoverflow.com/help/on-topic
我不知道 Safari 的任何视口扩展。但我确实知道清除 chrome 中缓存的快速方法：Windows 上的 CMD+shift+backspace 和 CMD+shift+delete。
谢谢 Natalie - 过去 Chrome 强迫我点击“清除浏览数据”按钮。看起来我可以通过按回车键来越过那个窗口。这仍然是一个过于冗长的过程 - CMD+shift+backspace -> return -> cmd+w 但比使用鼠标要好得多 -我想我会开始更多地使用 Chrome。谢谢！
使用这个：viewportsizes.com

标签： html css safari responsive-design viewport

【解决方案1】：

这是一个基于控制台的解决方案，灵感来自 @cshelswell 的回答，但这不需要 JQuery。

只需将其粘贴到控制台中，每次调整大小时，它都会开始在控制台中打印窗口大小和比率（至 16）。

window.onresize = function() {
    var w = window.visualViewport.width;
    var h = window.visualViewport.height;
    var ratioTop = 16;
    var ratioBottom = (16 * h) / w;
    console.log(`${w} x ${h} (${ratioTop}:${ratioBottom})`);
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我知道这个问题已经很老了，但这就是我要做的。它可能会帮助某人。

只需使用一点 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;
}

Shame safari 的工作方式不像 chrome 和向您展示，但我只是在每个项目上都坚持使用它，并且效果很好。我倾向于在#viewport div 上添加一些逻辑，仅显示我是否已登录，因此不会影响实时站点

【讨论】：

【解决方案4】：

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

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

【讨论】：

实际上，刚刚发现这个由于某种原因阻止了 Twitter 小部件的呈现。太糟糕了。 :(

【解决方案5】：

如果您需要当前大小，一个简单的方法是打开 Web Inspector (Cmd-Alt-I)。选择<html> 节点。然后单击右侧的 Metrics 检查器以查看当前视口宽度/高度。如果您正在调整窗口大小，这不会很快更新，但仍然可以为您提供大小的估计值。

【讨论】：

【解决方案6】：

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

我在 safari 的另一个选项卡中打开它，并参考它以获取当前视口大小。

【讨论】：