手机浏览器
虽然使用 Mobile Safari 呈现普通 Web 页面绰绰有余
但是许多 Web 开发人员都创建了针对 iPhone 应用
版本“使用 Ruby _disibledevent= no 将关闭 Mobile Safari 双击缩放行为对站点进行专门设置以符合 iPhone 查看屏幕除了这些属性的外您还可以设置页面 height如果需要更精确地控制用户缩放行为则可以设置 initial-scale、minimum-scale 和 maximum-scale 3者全都使用 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-ser
;
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.g) no-repeat;
}此文件和
CSS 文件中匹配条目的间只有少许差异h1 元素字体大小较小(实际上我通过些尝试和
偶然发现了所需大小)h1 标记现在是粗体并且将空白设置明确设为零粗体可以增强显示而零空白使它和视窗左上部分衔接得十分紧密#header ID 类尺寸现在符合 iPhone 视窗大小并且我手动更改了背景图片以适应空间大小您还需要创建 app/views/recipes/index.iphone.erb 文件
但是目前您可以把它留空执行这些更改后站点 iPhone 版本已经成型页眉将类似图 4
最新评论