在 Safari 的响应式设计模式中，如何将视口宽度设置为特定像素大小？

Question

通过单击并拖动侧边栏，我可以调整视口宽度。但是，通过单击和拖动侧边栏很难/不可能获得我想要的特定像素大小。我能做什么？

Answer 1

您可以通过命令行手动设置值。首先可以通过以下命令查询三个非iDevice presets的当前值：

defaults read ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations

在我的例子中返回了以下内容：

(
        {
        rotated = 0;
        screenHeight = 1200;
        screenWidth = 1600;
    },
        {
        rotated = 0;
        screenHeight = 1536;
        screenWidth = 2732;
    },
        {
        rotated = 0;
        screenHeight = 2160;
        screenWidth = 3840;
        userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15";
    }
)

要更改值，您需要覆盖它们。为此，请复制上一个查询的结果，根据自己的喜好进行调整，然后使用以下命令将值写回 plist：

defaults write ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations '<paste your modified settings here>'

例如

defaults write ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations '(
        {
        rotated = 0;
        screenHeight = 1180;
        screenWidth = 1532;
    },
        {
        rotated = 0;
        screenHeight = 1536;
        screenWidth = 2732;
    },
        {
        rotated = 0;
        screenHeight = 2160;
        screenWidth = 3840;
        userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15";
    }
)'

注：

• screenHeight 和 screenWidth 的值必须是所需尺寸的两倍，即如果您想要 590 x 766，则为 1180 x 1532。
• Safari 应该在设置值之前关闭。
• 在运行 Mojave 和 Safari 14.0.1 的 MacBook 上测试：在执行此操作之前创建备份不会有什么坏处！

Answer 2

从 Safari 16.1 开始，在响应式设计模式下，应该有一些可以用鼠标在视口的所有边上抓住的栏，您可以按住这些栏并拖动到您想要的尺寸。它应该自动更新响应式设计模式顶部的像素尺寸。

*我只找到了一种手工完成的方法，没有输入实际数字所以...感谢另一个很棒的网页设计工具 Apple