調整iPad CSS布局的大小以適合iPhone屏幕

Question

我有一個基於Web的游戲的CSS布局，該布局旨在僅適合iPad屏幕（它在iPad應用程序中運行）。 現在，我想將同一游戲移植到iPhone。 如果我只是使用iPhone 5模擬器運行該應用程序，它將僅向我顯示屏幕的320x568部分。

我想知道是否有辦法（自動？）縮小頁面上的每個組件以使其更小並適合iPhone 5的屏幕。 考慮到iPad的分辨率，設計了很多圖像，因此它們比iPhone上的圖像要大。 CSS可以根據屏幕大小來調整它們的大小嗎？還是需要手動調整它們的大小？

在index.html文件中，我已經包含了：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

但是，它不會自動調整大小到iPhone屏幕。 還有很多硬編碼的像素值。 我可以簡單地將其更改為相對於屏幕的百分比嗎？

出於記錄，我沒有編寫此代碼，也不擅長CSS。 謝謝您的幫助。

Answer 1

您可以查看該網站以獲取幫助...您可以研究如何根據設備尺寸調整布局。

http://alistapart.com/article/sensitive-web-design

如果鏈接過期，不要怪；-)