使用Ruby on Rails和Eclipse开发iPhone应用程序，第1部分 - 编程入门网
| 时，Mobile Safari 生态系统只有两个设备拥有相同尺寸的屏幕和浏览器软件。iPhone 中页面顶部的可视查看区为 320 像素（宽）X 356 像素（高）。页面顶部的 URL 栏是您的用户在向下滚动时将获得的额外 60 个像 素。Mobile Safari 页面将伸展到屏幕的各个边缘而不会留有空白。
Mobile Safari 的默认行为将假定 Web 站点的宽度为 980 像素，并且把它收缩三分之一以适应 iPhone 的可视区域。这样做对于许多站点都是有效的，但是下列情况除外：站点异乎寻常的窄；您正在 尝试让站点精确地满足 iPhone 的大小。幸运的是，Mobile Safari 为您准备了一种机制来精确指定显示 站点所需的宽度。 您可以使用特殊的 meta 标记来指定 Mobile Safari 视窗的属性。清单 3 显示了放在新 app/views/layouts/recipes.iphone.erb 布局文件中的标记。 清单 3. Mobile Safari 视窗标记的头文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Recipes: <%= controller.action_name %></title> <meta name = "viewport" content = "width = device-width, user-scalable = no"> <%= stylesheet_link_tag ''iphone'' %> </head> <body> <h1 id="header"><%= "Soups OnLine" %></h1> <%= yield %> </body> </html> 使用Ruby on Rails和Eclipse开发iPhone应用程序，第1部分(7)时间:2011-11-29 ibm developerWorks Noel Rappin视窗 meta 标记将设置视窗的两个属性。第一个属性 width = device-width 将告诉 Mobile Safari 您需要使用设备的当前宽度呈现站点。也可以将该值设为 200 到 10,000 之间的任何常数值。第二个属 性 user-scalable = no 将关闭 Mobile Safari 双击缩放行为，对站点进行专门设置以符合 iPhone 查 看屏幕。除了这些属性之外，您还可以设置页面的 height。如果需要更精确地控制用户缩放行为，则可 以设置 initial-scale、minimum-scale 和 maximum-scale。三者全都使用 1.0 作为默认值并且范围可 以在 0.0 和 10.0 之间。 该局部布局文件中的另一个特定于 iPhone 的行是 CSS 样式表标记，该标记将指定新的特定于 iPhone 的 CSS 文件。您可能看到有些参考资料建议对 iPhone 内容使用条件 CSS。您可以这样做，但是 我发现语法有些不透明。由于您知道要呈现到服务器端的哪个浏览器中，因此实在没有必要这样做 — 您 可以为该浏览器指定所需的文件。 清单 4 是我为处理 Soups OnLine 的 iPhone 版本的初始页眉而创建的 CSS 文件。 清单 4. Mobile Safari 的 CSS 文件
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000000;
}
h1 {
font-weight: bold;
font-size: 175%;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
#header {
width: 320px;
height: 40px;
margin: 0 auto;
background: url(/images/img02_iphone.gif) no-repeat;
}
此文件与初始 CSS 文件中的匹配条目之间只有少许差异。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
