在 Safari 的响应式设计模式中,如何将视口宽度设置为特定的 px 大小?

ton*_*120 10 html css safari safari-web-inspector

通过单击并拖动侧边栏,我可以调整视口宽度。然而,通过单击并拖动侧边栏,很难/不可能获得我想要的特定像素大小。我能做些什么?

在此输入图像描述

cor*_*ter 9

您可以通过命令行手动设置这些值。首先,您可以使用以下命令查询三个非iDevice预设的当前值:

defaults read ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations
Run Code Online (Sandbox Code Playgroud)

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

(
        {
        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";
    }
)
Run Code Online (Sandbox Code Playgroud)

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

defaults write ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations '<paste your modified settings here>'
Run Code Online (Sandbox Code Playgroud)

例如

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";
    }
)'

Run Code Online (Sandbox Code Playgroud)

笔记:

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