什麼是iPhone屏幕分辨率？

我知道這已被問到，但我仍然感到困惑。什麼是iPhone屏幕分辨率？

我想爲iPhone構建一個簡單的頁面：徽標在頂部，電話號碼，地址以及佔用整個屏幕（無重複）的BG。

當我運行一個腳本打印screenwidth和screenheight我得到：320px * 480px。

但是，當我創建這些確切尺寸的div時，它很小。是什麼賦予了？應該是檢測到的分辨率的整個尺寸的框不佔據整個屏幕？因此，如果我爲iPhone設計一個頁面，並且我希望它在Safari（iPhone上）佔據整個屏幕，那麼我應該設計什麼樣的分辨率？

我正在使用運行iOS 4.0的iPhone 3G作爲我的測試設備。

感謝您的任何幫助。

來源

2010-07-13 AJB

你可能想全屏選項，以及設置初始尺寸 – 2010-07-13 19:56:12

您需要視口元標記來告訴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; 
}

來源

2010-07-13 19:53:52 Marko

Oiy。感謝Marko。這對我來說是新的，我想我可能會失去理智。 – AJB 2010-07-13 20:09:35

這取決於哪個iPhone。原來的3G和3GS是320x480，4.0是640x960的兩倍。如果您設計的分辨率較高，那麼較舊的手機會將其縮小50％，應該看起來不錯。

您可能還想了解如何使用媒體查詢來優化iPhone體驗。關於this blog post的更多內容。

來源

2010-07-13 19:53:06

感謝技術規格Tim。 – AJB 2010-07-13 20:10:29

問題是iPhone試圖自行調整它。如果你把這個標籤放在頁面的頭部，它會告訴手機「別擔心，我會自己處理內容的大小」，並強制屏幕以1：1的比例。

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

來源

2010-07-13 19:53:27 mclark1129

感謝Mike的幫助。 – AJB 2010-07-13 20:11:08

其他答案是正確的，你需要配置視口。

這個蘋果官方文檔是在這裏：

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

值得通過whole document略讀 - 以及一個很多視標籤的描述，它（配有圖片！）也有很多其他有用的建議，將網頁定位到iphone。

來源

2010-07-13 19:57:04 JosephH

王牌，感謝約瑟夫，看起來正是我需要的東西。那麼，當我讀它時，還有一壺咖啡。 – AJB 2010-07-13 20:13:22

你可能想使用所有這些

<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" />

來源

2010-07-13 19:57:24

非常好，謝謝模糊。但是，隱藏地址欄的標籤似乎不適合我。財產標題應該是最後一個的「名稱」，還是一個錯字？ – AJB 2010-07-13 20:15:33

快速搜索說這只是一個錯字。 – AJB 2010-07-13 20:20:55

此外，如果「應用程序」保存到主屏幕，似乎標籤只隱藏狀態和地址欄。仍然看着它。 – AJB 2010-07-13 20:25:43

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

來源

2013-01-24 05:36:06

什麼是iPhone屏幕分辨率？

回答

相關問題