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。 p>

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

Answer 3

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

关于此的官方苹果文档在这里：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW1

值得浏览whole document - 以及很多的视口标记说明（包含图片！），它还有许多针对网络定位的其他有用建议页面到iPhone。

Answer 4

这取决于哪个iPhone。最初的3G和3GS是320x480,4.0是640x960的两倍。如果你设计的分辨率更高，那么旧手机会将它缩小50％，看起来应该很好。

您可能还希望使用媒体查询来优化iPhone体验。 this blog post中有更多相关内容。

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;
}

什么是iPhone屏幕分辨率？

6 个答案: