为Firefox响应式设计视图添加更多预设devtool.responsiveUI

seo教程 litianseo 6个月前 (06-23) 64次浏览 已收录 0个评论

为Firefox响应式设计视图添加更多预设devtool.responsiveUI对于我们的 Web 开发人员,Firefox附带了一个非常好的开发人员工具界面(Shift+F5Cmd+Shift+I),其中包括响应式设计视图(Ctrl+Shift+MAlt+Shift+M)。不幸的是,RDV 在选择预设分辨率方面令人失望。令人遗憾的是 Firefox 开发人员没有包含更常见的分辨率,例如 1920×1080 或 1366×768。

它们也不容易添加预设。您必须手动调整窗口大小,并且使用鼠标将尺寸缩小到像素并不容易。

这就是为什么我编译了一个可以在 RDM 中使用的常用分辨率列表。以下是添加这些常用分辨率的方法:

  1. 打开一个新的Firefox选项卡或窗口,然后键入 about:config
  2. (如果出现警告信息,只需单击“确定”或“我会小心,我保证!”。)
  3. 现在,我们必须找到 RDM 预设的设置。在搜索栏中输入devtools.responsiveUI.presets。如果此设置不存在,请创建它。要创建设置,请在空白区域中单击鼠标右键,单击“新建” – >“字符串”,输入名称并将值保留为空。
    (帽子提示阿尔迪评论者,它是“responsiveUI”,而不是 “responsive.UI”)
  4. 右键单击 – > 修改
  5. 将以下内容复制并粘贴到文本字段中,替换原始内容:
    [{ name CGA:320×200 width 320 height 200 },
    { name QVGA:320×240 width 320 height 240 },
    { name CIF:352×288 width 352 height 288 },
    { name SIF:384×288 width 384 height 288 },
    { name HVGA:480×320 width 480 height 320 },
    { name VGA(NTSC):640×480 width 640 height 480 },
    { name PAL:768×576 width 768 height 576 },
    { name WVGA:800×480 width 800 height 480 },
    { name SVGA:800×600 width 800 height 600 },
    { name WVGA(NTSC):854×480 width 854 height 480 },
    { name PAL:1024×576 width 1024 height 576 },
    { name WSVGA width 1024 height 600 },
    { name XGA:1024×768 width 1024 height 768 },
    { name 1152×768 width 1152 height 768 },
    { name XGA:1152×864 width 1152 height 864 },
    { name WXGA:1280×600 width 1280 height 600 },
    { name HD 720:1280×720 width 1280 height 720 },
    { name WXGA:1280×768 width 1280 height 768 },
    { name WXGA:1280×800 width 1280 height 800 },
    { name SXGA:1280×1024 width 1280 height 1024 },
    { name 980×1280 width 980 height 1280 },
    { name Microsoft Surface RT:320×240 width 1366 height 768 },
    { name 1400×900 width 1400 height 900 },
    { name 1400×960 width 1400 height 960 },
    { name SXGA +:1400×1050 width 1400 height 1050 },
    { name 1400×1080 width 1400 height 1080 },
    { name 1600×900 width 1600 height 900 },
    { name UXGA:1600×1200 width 1600 height 1200 },
    { name WSXGA +:1680×1050 width 1680 height 1050 },
    { name 1920×900 width 1920 height 900 },
    { name HD 1080:1920×1080 width 1920 height 1080 },
    { name WUXGA:1920×1200 width 1920 height 1200 },
    { name 2K:2048×1080 width 2048 height 1080 },
    { name QXGA:2048×1536 width 2048 height 1536 },
    { name WQHD:2560×1440 width 2560 height 1440 },
    { name WQXGA:2560×1600 width 2560 height 1600 },
    { name QSXGA:2560×2048 width 2560 height 2048 },
    { name 2160p:3840×2160 width 3840 height 2160 },
    { name 4k:4096×2160 width 4096 height 2160 },
    { name 4320p:7680×4320 width 7680 height 4320 },
    { name 8k:8192×4608 width 8192 height 4608 },
    { name 8640p:15360×8340 width 15360 height 8640 }]

    或者,在 GitHub 上查看此代码并从那里进行复制和粘贴。帽子提示评论者 Yoni Sudwerts 指出“关键”应该是“名字”。这是 FF 37 以后的变化。

  6. 单击确定。如果您使用 RDM 打开任何选项卡,请关闭并重新打开它们以查看更改。

现在,当您使用 RDV 时,您将拥有所有常用的屏幕分辨率。不再手动调整框架大小!


32w.net , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:http://www.32w.net/jiaoceng/565.html
为Firefox响应式设计视图添加更多预设devtool.responsiveUI
喜欢 (0)
[576801182@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址