如何为移动设备适配网站？

Question

我有一个非常简单的静态网页（只有css和链接，没有脚本）。

在安卓和iPhone上看起来很好，但是太小了。我猜测他们把它缩小了，因为这样可以适用于大多数站点。

我该如何覆盖这个并使它显示我想要的尺寸？

- koby

---

无论您选择什么，一定要在较新版本的Android上进行测试。我拥有一个漂亮的简单单列布局，在Android 1.5和Android 1.6中看起来不错。但是在Android 2中，所有文本似乎都被压成了一个小片段。这很奇怪，因为我将不得不切换到多列布局来支持手机，而简单应该更好才对。 - Lance Nanek

Answer 1

Android会自动调整网页的大小，建议使用width:100%或小于310像素（滚动条会占用空间）以适应正常视图模式。

对于iPhone，请尝试使用以下代码强制正确的大小

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

此外，若要强制修改字体大小，请在您的 CSS 中使用以下代码：

-webkit-text-size-adjust: none;

- TomHastjarjanto

Answer 2

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

列表应该用逗号分隔。

- dergachev