网络应用程序的CSS问题

Question

我试图在Web应用程序样式中呈现我的记事卡。 我并不担心缓存，或使其脱机工作。

我只想让它在iOS浏览器中呈现良好。 这里是链接：http://kaninepete.com/flashcard/review.php?Sec=3

我希望它看起来像你重新调整浏览器窗口大小为320x480一样。 问题是，它总是呈现出大量的空白空间。 我想锁定滚动到只有垂直轴（如翻转记事本）， ，但也有可读大小的文字。

Answer 1

您可以使用CSS media queries设置你的模板上有一定宽度/高度模型。这效果很好，可以专门针对iPhone屏幕进行调整。

至于字体大小的问题，你可能需要花时间测试。有了它，它需要一些类型的虚拟模拟器或一个真正的iPhone，你可以测试该网站。我只是将它加载到我的iPhone 4上，我发现你对附加空间的含义 - 这仅仅是因为你的页面大小。尝试搞乱CSS媒体查询我想你会在那里找到答案。

这里是a very handy Google search，希望能够帮助您开始在正确的轨道上。 CSS3有很多新功能。他们中许多人对手机:)

Answer 2

重读你的问题面向，这里的依据是什么，我认为你正在寻找一些建议。

1. 在继续之前，请确保您的文档是有效的HTML。 iOS上的Safari支持HTML 5，所以我建议定位，除非你的平台已经针对不同的东西。

2. 如果你只是想让它在Safari浏览器的iOS，则该代码运行良好。但是，如果您希望它在其他浏览器中看起来类似，则可能需要查看针对iOS设备的样式（通过宽度/高度）。请参阅http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript（看起来很诡异，但基于一周前的一些研究，这似乎仍然是建议的路线。）

3. 如果您想要定位多个浏览器。溢出：隐藏并设置像素宽度。

4. 一般来说，我会说，你要调整你的标记以及。列表项目或标题将比简单的休息好得多。

Answer 3

也许我只是简单化的问题，但它看起来对我来说，你真正需要做的是包装每个notecard在一个div，也许能给每个div元素<div class="notecard_wrapper">。然后附上一个样式表，指定每张卡片的宽度和高度。

Answer 4

This page解释Safari的视口以及如何更改它。它可能会修复字体大小问题，并可能有助于页面大小。

基本上，Safari浏览器在默认情况下模拟了一个屏幕，是关于900px宽，当它实际上是约300像素（这样的页面看起来缩小）。这使得为​​真实计算机设计的页面能够正确渲染，但对于一个Web应用程序，您通常不希望它放大页面。视口标签应该让你控制它。