Zabbix手机版 - Zabbix 针对小屏幕优化的样式

Zabbix 是一款应用很广的企业监控工具，其 Web 界面使用 PHP 编写，3.0版本以后，界面有了大变化，相比 2.x 也好看了许多。

但是 Zabbix 在手机上查看效果仍然不是很好。

因为确实有在手机上查看的需求，故针对 zabbix 主要界面做了一些优化，使其适合在小屏幕设备上使用。

注意：仅测试了Zabbix 3.0，其他版本可能存在不兼容现象。

现在你可以尝试我新写的 zabbix 客户端 zcate

视频与截图

竖屏版操作视频

<video width="50%" controls="controls" style="display:block;margin:1rem auto">
<source src="https://cucc.file.qiansw.com:1443/video/2017/01/zabbix-mobile-1.mp4" type="video/mp4">
您的浏览器不支持 html5，请升级。
</video>

横屏版操作视频

<video width="100%" controls="controls" style="display:block;margin:1rem auto">
<source src="https://cucc.file.qiansw.com:1443/video/2017/01/zabbix-mobile-2.mp4" type="video/mp4">
您的浏览器不支持 html5，请升级。
</video>

使用方法

将 zabbix-mobile.css 上传到 styles 目录，确保 web 服务对其有可读权限。

上传完毕之后，路径应该是这样的：

/your-zabbix-www-path/styles/zabbix-mobile.css

然后修改 zabbix 的全局头文件 CPageHeader.php件，添加对上述 css 文件的引用。

这个文件的详细路径为：

/your-zabbix-www-path/include/classes/html/pageheader/CPageHeader.php

修改大约在 143 行位置，添加下面行，请确保不能少或多分号及引号，与下面文本不一样可能会造成 php 语法错误：

echo '<link rel="stylesheet" type="text/css" href="styles/zabbix-mobile.css">';

可以参考下图，根据上下文确定插入什么位置：

下载

Github: https://github.com/internelp/zabbix-mobile-style

欢迎加QQ群交流ZABBIX：195665368