是否有显示视口大小的 Safari 的免费扩展
Posted
技术标签:
【中文标题】是否有显示视口大小的 Safari 的免费扩展【英文标题】：Is there a free extension for Safari that displays the viewport size 【发布时间】：2014-01-29 07:05:28 【问题描述】：我有一个很好的 chrome 扩展（'Window Resizer'），它显示视口大小，但我不知道如何在不使用鼠标的情况下清除 chrome 中的缓存，所以我倾向于使用 Safari 进行浏览器开发.
我环顾四周，似乎找不到在 Safari 中显示视口大小的扩展程序（我可以找到各种允许我设置视口大小的扩展程序，但是当我更改时没有一个可以显示它手动）。
有谁知道这样做的免费扩展程序？
【问题讨论】：
请不要投票关闭。这是一个有效的问题。 Safari 是开发人员使用的工具，如指南的第一部分所述，可以在此处询问 - ***.com/help/on-topic 我不知道 Safari 的任何视口扩展。但我确实知道清除 chrome 中缓存的快速方法：Windows 上的 CMD+shift+backspace 和 CMD+shift+delete。 谢谢 Natalie - 过去 Chrome 强迫我点击“清除浏览数据”按钮。看起来我可以通过按回车键来越过那个窗口。这仍然是一个过于冗长的过程 - CMD+shift+backspace -> return -> cmd+w 但比使用鼠标要好得多 -我想我会开始更多地使用 Chrome。谢谢！ 使用这个：viewportsizes.com 【参考方案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 的另一个选项卡中打开它，并参考它以获取当前视口大小。
【讨论】：
以上是关于是否有显示视口大小的 Safari 的免费扩展的主要内容，如果未能解决你的问题，请参考以下文章
Storybook 的视口插件不显示自定义视口大小（svelte-kit）