我用什么CSS代码让我的网页填满iPhone或Android的屏幕？

Question

我有下面的HTML代码.我已将机身宽度设置为640px,接近iPhone的分辨率.但是,当我在iPhone或Android上查看网页时,它会像在我的网络浏览器中一样显示 - 只占用屏幕的一部分.文字很小,不可用.

我使用什么CSS代码,以便文本在桌面浏览器中保持正常,但在移动设备上填充屏幕？我读了一些关于使用device-width属性的事情,但我也无法使用它们.我究竟做错了什么？

注意我并没有试图让红色边框在屏幕上一直伸展(例如:body:width100%).我只是不明白为什么iPhone没有放大到设置为它应该具有的相同分辨率的区域.

HTML代码:

<style>
    body{ width:640px; border: 1px solid red; }
</style>

</head>
<body>
Hello World
</body>
</html>

实际产量:

期望的输出:

Answer 1

把它放在你的头标记中:

<meta name="viewport" content="width=480">

我用什么CSS代码让我的网​​页填满iPhone或Android的屏幕？