iPhone 的屏幕分辨率是多少？

Question

我知道有人问过这个问题，但我仍然感到困惑。

我正在尝试为 iPhone 构建一个非常简单的页面：顶部的徽标、电话号码、地址和占据整个屏幕的 BG（不重复）。

当我运行打印屏幕宽度和屏幕高度的脚本时，我得到：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">

Answer 3

其他答案是正确的，您需要配置视口。

有关此问题的官方苹果文档位于：

https ://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

值得浏览一下整个文档 - 以及大量视口标签的描述（附有图片！），它还有许多其他关于将网页定位到 iPhone 的有用建议。

Answer 4

这取决于哪款 iPhone。最初的 3G 和 3GS 的分辨率为 320x480，4.0 是其两倍，为 640x960。如果你设计的是更高分辨率，旧款手机会将其缩小 50%，看起来应该不错。

您可能还想研究使用媒体查询来优化 iPhone 体验。 此博文。

Answer 5

你可能想使用所有这些

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this one tells Mobile Safari to hide the Address Bar and make the app fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Answer 6

在 MonoTouch 中，尝试

 var yourFrame = FrameForOrientation(CurrentInterfaceOrientation);

使用这些方法

public static UIInterfaceOrientation CurrentInterfaceOrientation {
    get {
        return UIApplication.SharedApplication.StatusBarOrientation;
    }
}

public static RectangleF FrameForOrientation(UIInterfaceOrientation orientation, bool subtractStatusBarHeight = true) {
    var screen = UIScreen.MainScreen;
    var fullScreenRect = screen.Bounds;      // always implicitly in Portrait orientation.
    var appFrame = screen.ApplicationFrame;


    // Initially assume portrait orientation.
    var width = fullScreenRect.Width;
    var height = fullScreenRect.Height;

    // Correct for orientation.
    if (IsLandscapeOrientation(orientation)) {
        width = fullScreenRect.Height;
        height = fullScreenRect.Width;
    }

    var startHeight = 0.0f;
    if (subtractStatusBarHeight) {
        // Find status bar height by checking which dimension of the applicationFrame is narrower than screen bounds.
        // Little bit ugly looking, but it'll still work even if they change the status bar height in future.
        var statusBarHeight = Math.Max((fullScreenRect.Width - appFrame.Width), (fullScreenRect.Height- appFrame.Height));

        // Account for status bar, which always subtracts from the height (since it's always at the top of the screen).
        height -= statusBarHeight;
        startHeight = statusBarHeight;
    }
    return new RectangleF(0, startHeight, width, height);
}

public static bool IsLandscapeOrientation(UIInterfaceOrientation orientation) {
    return 
        orientation == UIInterfaceOrientation.LandscapeLeft ||
        orientation == UIInterfaceOrientation.LandscapeRight;
}