什么是iPhone屏幕分辨率？

Question

我知道这已被问过,但我仍然感到困惑.

我正在尝试为iPhone构建一个简单易用的页面:顶部的徽标,电话号码,地址以及占据整个屏幕的BG(不重复).

当我运行一个打印screenwidth和screenheight的脚本时,我得到了:320px*480px.

但是,当我创建这些精确尺寸的div时,它很小.是什么赋予了？如果检测到的分辨率的整个大小的盒子不占用整个屏幕吗？

所以,如果我正在为iPhone设计一个页面,我希望它能在Safari(在iPhone上)占据整个屏幕,我应该为它设计什么样的分辨率呢？

我正在使用运行iOS 4.0的iPhone 3G作为我的测试设备.

谢谢你的帮助.

Answer 1

您需要视口元标记告诉iPhone您的网站是专门为它设计的.

用这个:

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

如果您需要用户缩放等,您可以更改缩放选项.

此外,如果您希望您的应用也以横向模式工作,您可以将宽度设置为100%.

#wrapper {
    width: 100%
    max-width: 480px;
}

Answer 2

问题是iPhone正试图自己扩展它.如果你把这个标签放在你的页面的头部,它会告诉手机"别担心,我会自己处理内容的大小"并将强制屏幕的比例为1:1.

<meta name = "viewport" content="inital-scale=1.0">