Độ phân giải màn hình iPhone là gì?

Question

Tôi biết điều này đã được yêu cầu nhưng tôi vẫn còn bối rối.

Tôi đang cố gắng xây dựng trang đơn giản cho iPhone: biểu trưng ở trên cùng, số điện thoại, địa chỉ và BG chiếm toàn bộ màn hình (không lặp lại).

Khi tôi chạy tập lệnh in độ rộng màn hình và độ phân giải tôi nhận được: 320px * 480px.

Tuy nhiên, khi tôi tạo một div các kích thước chính xác thì nó rất nhỏ. Đưa cái gì? Nên một hộp đó là toàn bộ kích thước của độ phân giải phát hiện không chiếm toàn bộ màn hình?

Vì vậy, nếu tôi đang thiết kế một trang cho iPhone và tôi muốn nó chiếm toàn bộ màn hình trong Safari (trên iPhone) chính xác thì tôi nên thiết kế độ phân giải nào?

Tôi đang sử dụng iPhone 3G chạy iOS 4.0 làm thiết bị thử nghiệm của mình.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Bạn cần thẻ meta chế độ xem để thông báo cho iPhone rằng trang web của bạn đã được thiết kế riêng cho nó.

Sử dụng này:

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

Bạn có thể thay đổi các tùy chọn mở rộng quy mô nếu bạn cần người sử dụng để phóng to vv ..

Ngoài ra nếu bạn muốn ứng dụng của bạn để làm việc trong chế độ phong cảnh là tốt, bạn có thể thiết lập chiều rộng là 100%.

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

Answer 2

Tùy thuộc vào iPhone. Bản gốc, 3G và 3GS là 320x480, 4.0 gấp đôi, ở mức 640x960. Nếu bạn thiết kế cho độ phân giải cao hơn, các điện thoại cũ sẽ giảm 50% và nó sẽ ổn.

Bạn cũng có thể muốn xem xét sử dụng truy vấn phương tiện để tối ưu hóa trải nghiệm iPhone. Có thêm về điều đó trong this blog post.

Answer 3

Vấn đề là iPhone đang cố gắng mở rộng quy mô đó. Nếu bạn đặt thẻ này vào phần đầu của trang, nó sẽ báo cho điện thoại "Đừng lo, tôi sẽ xử lý kích thước của nội dung theo cách của riêng tôi" và sẽ buộc màn hình ở tỷ lệ 1: 1.

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

Answer 4

Các câu trả lời khác là chính xác mà bạn cần định cấu hình chế độ xem.

Các tài liệu táo chính thức về vấn đề này là ở đây:

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

Nó có giá trị lướt qua các whole document - cũng như một nhiều mô tả của thẻ viewport, nó (hoàn chỉnh với hình ảnh!) cũng có rất nhiều lời khuyên hữu ích khác để nhắm mục tiêu các trang web đến iphone.

Answer 5

có thể bạn muốn sử dụng tất cả các

<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

Trong MonoTouch, hãy thử

var yourFrame = FrameForOrientation(CurrentInterfaceOrientation); 

với những phương pháp

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