In Safari's Responsive Design Mode, how I make viewport width a specific px-size?

user_14037283 0
Viewed 2893

By clicking & dragging the sidebar I can resize viewport width. However, through clicking & dragging the side-bar it's too difficult/impossible to get a particular px-size I want. What can I do?

enter image description here

safari-web-inspector safari css html
1 Answers

You can set the values manually via the command line. First you can query the current values of the three non-iDevice presets with the following command:

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

which in my case returned the following:

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

To change the values, you need to overwrite them. To do so, copy the result of the previous query, adjust it to your liking and write the values back to the plist by using the following command:

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

e.g.

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

Note:

  • Values for screenHeight and screenWidth must be twice as high as your required dimensions, i.e. 1180 x 1532 if you want to have 590 x 766.
  • Safari should be closed before setting the values.
  • Tested on a MacBook running Mojave and Safari 14.0.1: creating a backup before doing this won't hurt!
user_58186220
Related