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

Posted

技术标签:

【中文标题】在 Safari 的响应式设计模式中,如何将视口宽度设为特定的 px 大小?【英文标题】:In Safari's Responsive Design Mode, how I make viewport width a specific px-size? 【发布时间】:2021-04-21 16:33:23 【问题描述】:

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

【问题讨论】:

您可以点击此链接,它可以完成您的工作。:***.com/questions/38220485/…。 视口大小是浏览器的像素大小,由用户控制。用户决定他是否想让他的浏览器更小,而你无法控制它。这就是为什么您首先拥有响应式网页设计的大概念。但是,您可以使用min-heightmin-width 预定义网站的宽度和高度,并导致滚动条溢出 @SajjadHosen 这没有回答我的问题。忘记编码。我处于 Safari 的响应式设计模式。如何将其更改为特定的视口宽度 px 大小。 【参考方案1】:

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

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 上测试:在执行此操作之前创建备份不会有任何影响!

【讨论】:

以上是关于在 Safari 的响应式设计模式中,如何将视口宽度设为特定的 px 大小?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 Chrome DevTools 响应式视口认为它的宽度为 980 像素?

响应式设计 - Media Query无法在iPhone上运行?

响应式设计中的字体大小和元视口

如何在响应式设计中禁用缩放功能?

如何开发响应式网页[关闭]

超 Nice 的表格响应式布局小技巧