我正试图以网络应用程序风格呈现我的记事卡。 我并不担心缓存，也不让它脱机工作。
我只是想让它在iOS浏览器中渲染得很好。 这是链接：http://kaninepete.com/flashcard/review.php?Sec=3
我希望它与您将浏览器窗口的大小调整为320x480一样。 问题是，它总是会产生大量的空白空间。 我想将滚动锁定到垂直轴（就像翻阅记录卡一样）， 但也有可读大小的文本。
答案 0 :(得分：0)
您可以使用CSS media queries在特定宽度/高度模型上设置模板。这很好用，可以专门针对iPhone屏幕进行调整。
至于字体大小问题，您可能需要花时间测试。有了它，它将需要某种类型的虚拟模拟器或真正的iPhone，你可以测试该网站。我只是将它加载到我的iPhone 4上，我看到你对额外空间的意思 - 这只是因为你的页面大小。尝试搞乱CSS媒体查询我想你会在那里找到答案。
以下是a very handy Google search，希望能让您开始走上正轨。 CSS3有很多新功能。他们中的许多人都面向移动设备：）
答案 1 :(得分：0)
再次阅读你的问题，这里有一些基于我认为你正在寻找的建议。
在继续之前，请确保您的文档是有效的HTML。 iOS上的Safari支持HTML 5，因此我建议将其定位，除非您的平台已针对不同的内容。
如果您只是希望它在iOS Safari中运行良好，那么请为此编写代码。但是，如果您希望在其他浏览器中看起来类似，那么可能需要查看针对iOS设备的样式（通过宽度/高度）。见http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript（看起来很糟糕，但基于一周前的一些研究，这似乎仍然是建议的路线。）
如果您想要定位多个浏览器，那么您的CSS应该不在其中。溢出：隐藏和设置像素宽度。
一般来说，我会说你也想调整你的标记。列出项目或标题会比简单的休息更好。
答案 2 :(得分：0)
也许我只是过于简单化了这个问题，但在我看来，你真正需要做的就是将每个记事卡包装在一个div中，或许给每个div <div class="notecard_wrapper">。然后只需附上一个样式表，指定每张卡的宽度和高度。
答案 3 :(得分：0)
This page解释了Safari的视口以及如何更改它。它可能会修复字体大小问题，并可能有助于页面大小。
基本上，Safari默认模拟大约900px宽的屏幕，当它实际上大约为300px时（因此页面显示缩小）。这使得为真实计算机设计的页面可以正常渲染，但对于Web应用程序，您通常不希望它完全缩放页面。视口标记可以让你控制它。