使用Ruby on Rails和Eclipse开发iPhone应用程序，第1部分 - 编程入门网
| h1 元素的字体大小较小（实际上，我通过一些尝试和错误偶然发现了所需的大小）。h1 标记现在是粗体并且将空白设置明确设为零。粗体可以增强显示，而零空白使它与视窗的左上部分衔接得十分紧密。#header ID 类的尺寸现在符合 iPhone 视窗的大小，并且我手动更改了背景图片以适应空间大小。
您还需要创建 app/views/recipes/index.iphone.erb 文件，但是目前，您可以把它留空。执行这些更改后，站点的 iPhone 版本已经成型。页眉将类似图 4。 使用Ruby on Rails和Eclipse开发iPhone应用程序，第1部分(8)时间:2011-11-29 ibm developerWorks Noel Rappin图 4. Soups OnLine 页眉
在大多数模拟器中，您将注意到旋转视窗后将向外扩展图像以匹配设备的 480 像素的新宽度。这是因为您曾指定设备宽度应当用作缩放尺寸。 选择进入和选择退出 最后要添加的是 Mobile Safari 用户选择退出手机视图然后选择重新进入的机制。这将允许手机用户能够查看完整界面，界面可能有更多功能（不过可能很难进行导航），然后根据需要切回 iPhone 界面。您不需要为桌面用户设置类似链接以选择进入 iPhone 界面，因为最终（指在第 2 部分中）将在桌面使用 Mobile Safari 专用的 CSS 和 JavaScript 代码，而与站点没有关系。 机制非常简单：在设置指定用户浏览器类型首选项的 cookie 的 iPhone 界面的页脚中添加链接。然后允许该首选项在决定要发送哪种格式时覆盖用户代理字符串。 首先，添加链接。更改 app/views/layouts/recipes.iphone.erb 文件中的 body 标记，如下所示： 清单 5. 选择退出链接的布局主体
<body> <h1 id="header"><%= "Soups OnLine" %></h1> <%= yield %> <br/> <%= link_to "Switch To Desktop View", {:controller => "browsers", :action => :desktop}, :class => "mobile_link" %> </body>
该链接有一个新 CSS 类，该类是在 iPhone CSS 文件中定义的。 清单 6. 选择退出链接的 CSS 代码
.mobile_link { font-size: 14px; font-weight: bold; font-family: Helvetica; color: #00f; text-decoration: none; text-align: center; display: block; width: 320px; }
使用Ruby on Rails和Eclipse开发iPhone应用程序，第1部分(9)时间:2011-11-29 ibm developerWorks Noel RappinHelvetica 是为 iPhone 系统链接选择的字体。该字体比正文的推荐字体小一些，但是这里不应该是正文。其他条目将在视窗中居中显示该链接。结果将类似图 5。 图 5. 切换到桌面链接
下一步是设置 cookie。正如您可以从清单 5 中的链接定义看到的那样，我创建了一个新 BrowsersController 控制器类来管理这段代码。清单 7 提供设置 cookie 的代码。 清单 7. 选择进入和选择退出的 BrowsersController 代码 class BrowsersController < ApplicationController def desktop cookies["browser"] = "desktop" redirect_to recipes_path end def mobile cookies["browser"] = "mobile" redirect_to recipes_path end end 您可以看到它十分简单。它将只设置 cookie 并且重定向回被用作索引页面的页面。 然后，您需要更改 set_iphone_format 方法以考虑浏览器首选项。更新后的方法类似清单 8。 清单 8. 设置选择退出的 iPhone 格式 def set_iphone_format if is_iphone_request? or request.format.to_sym == :iphone |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
