在 Firefox 响应式设计视图中自定义背景

Question

有没有办法在 Firefox 中自定义屏幕背景 "Responsive Design View"？我想插入一张图片（比如一张空白的iphone模板），然后用录屏软件模拟手机演示。据我所知，无法通过 css 或其他插件更改背景。

我查看了 Firefox OS 模拟器，但它不能满足我的需求（而且您不能使用 firebug 或 Agent Spoofer 等插件）。

Answer 1

在不知道您尝试了什么的情况下，我们不得不猜测您需要什么来回答这个问题。您只需要知道选择器是什么吗？您需要了解如何应用 CSS 吗？您是否正在尝试制作进行此类修改的附加组件？

在没有更多信息的情况下，这里有一些关于 CSS 用于设置样式的一般信息：

响应模式使用 chrome://browser/content/browser.css 和 chrome://browser/skin/browser.css 中的 CSS 样式。这两个都位于 omni.ja（文件扩展名为 .ja 的 zip 存档）文件中 浏览器 目录。在该存档中，上述文件是 chrome/browser/content/browser/browser.css、chrome/browser/skin/classic/browser/browser.css , 和 chrome/browser/skin/classic/aero/browser/browser.css.

背景似乎是 <vbox> 并且具有 class="browserContainer" 属性：responsivemode="true"。

从 Firefox 36.0.4 开始，相关的 CSS 是（来自 chrome://browser/skin/browser.css）：

.browserContainer[responsivemode] {
  background-color: #222;
  padding: 0 20px 20px 20px;
}

您可以通过多种方式对此进行更改。一种方法是提取 omni.ja 文件的内容，对适当的 browser.css 文件进行修改，然后放入将所有文件放回到名为 omni.ja 的存档中，并将该存档放在 browser 目录中以代替原始文件。另一种方法是创建一个附加组件来覆盖 chrome://browser/skin/browser.css 文件（这可以使用 override instruction in the add-on's chrome.manifest 文件。另一种方法是让附加组件以多种不同方式之一直接应用新样式。

然而，可能最简单的方法是创建一个 [配置文件目录]/chrome/userChrome.css 文件，其中包含您想要的 CSS使用（您可能必须在配置文件目录中创建 chrome 目录）。例如，以下将导致响应式设计视图的背景为红色：

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */
/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */
/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
/* Set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


.browserContainer[responsivemode],
vbox[anonid=browserContainer][responsivemode]{
    background-color:red !important;
}

在 Firefox 响应式设计视图中自定义背景

Customize background in Firefox Responsive Design View

firefox

firefox-addon