網絡應用程序的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應用程序，您通常不希望它放大頁面。視口標籤應該讓你控制它。