Question

我们的团队大量使用Trac进行项目管理，我需要不时查看Trac网站。然而，从移动设备查看Trac网站真的很不方便（在我的情况下它是iphone）。

我想知道是否有任何现有的hack / plugin / template / css套件可以帮助在移动设备上更好地显示Trac？我认为一些<meta>标签和css定位应该可以解决这个问题，但我无法从中获取更多信息。

感谢任何帮助。

很多！

Answer 1

首先考虑阅读TracInterfaceCustomization in Trac's wiki，更具体地说about using style.css，因为我同意您肯定需要更改网站范围的样式。

trac-hacks.org提供现成的主题。也许你会发现一些适合你需要的东西，至少比Trac默认好一点，以便更快开始。

最后ThemeEnginePlugin似乎是一个很好的工具，可以快速将你的想法变为现实，尽管我现在还没有自己测试过这个。祝你好运。

Answer 2

好的，我花了一段时间来解决这个问题。这不是完美的，也不好，但至少对我来说看起来好一点。

这就是我所做的：

在[trac root]/templates/文件夹中，添加或修改site.html，其中包含以下内容：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/" py:strip="">

  <head py:match="head" py:attrs="select('@*')">
<meta name="viewport" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

${select('*|comment()|text()')}

<link media="handheld, screen and (max-device-width: 480px)" href="/htdocs-trac/css/trac-mobile.css" type="text/css" rel="stylesheet" />

  </head>
  <!--! Custom match templates go here -->
</html>

上面会为每个Trac页面添加/htdocs-trac/css/trac-mobile.css的新CSS链接，然后你可以将仅限移动设备的样式放在css文件中，在我的例子中，css文件包含：

.nav li {
    white-space: normal;
}

#mainnav *:link, #mainnav *:visited {
    padding: 0 10px;
}

#mainnav *:link, #mainnav *:visited {
  padding: 0 0px;
}

#header h1 {
margin: 0;

}

老实说，它只会让标题栏显得更好，按钮不会碰撞。但是很多地方都使用基于表格的布局，而且（似乎）很容易被css解决。

希望对其他人有所帮助。

在移动设备上查看trac（iphone，android等）

2 个答案: