除了针对浏览器的类型定制样式表以外 ... 我们还可以判断用户的操作平台.. 然后去加载使用对应的自定义样式表 ... 比如你可以专门为 windows 系统添加样式 .. 也可以为 mac 系统添加样式 ...

下面我们试一下，专门为 iPhone 手机添加一个自定义的样式 ...

回到模板的 css 目录 ... 复制一下这个 gantry-custom-chrome.css ... 修改一个这个样式表的名称 ... gantry-custom-iphone.css ... 这样这个样式表会用在 iPhone 手机上 ...

打开样式表 ... 修改一下这条样式 ... 为 iPhone 准备的标志图像的名字是 iphone.png ...

保存 ...

下面我们可以使用 iOS 设备的模拟器试一下 ... 打开 iPhone 里面的 Safari 浏览器 ...

输入地址 ...

你会看到 ... 在 iPhone 上 ... 网站的标志会使用我们在 gantry-custom-iphone.css 样式表里，指定的 iphone.png 这个图像作为网站的标志 ...

Gantry 设置了一套规则去命名自定义的样式表 ... 你可以组合使用 ... 详细的信息可以参考一下这个地址 ...

http://gantry-framework.org/documentation/joomla/advanced/per_browser_co...

最后

顺便再看一下 Gantry 模板在 iPhone 上的表现 .. Gantry 架构的模板使用了响应式的设计 ... 所以网站页面在移动设备上的显示也会非常有好 ...

点击左上角的按钮 ... 可以弹出菜单 ...

这个响应式菜单的样式你可以在后台去修改 ..

回到模板管理 ... 打开 菜单 .. 响应式菜单 ... 改成 选择框 ... 保存 ...

再回到 iPhone 模拟器 .. 刷新 ... 点开菜单 ... 会出现一个选择框 ... 用户可以滚动选择框里的项目　... 选择打开对应的菜单 ..