Qual è la risoluzione dello schermo dell'iPhone?

Question

So che questo è stato chiesto ma sono ancora confuso.

Sto cercando di creare una pagina semplice per iPhone: il logo in alto, il numero di telefono, l'indirizzo e un BG che occupa l'intero schermo (nessuna ripetizione).

Quando ho eseguito uno script che ha stampato la larghezza dello schermo e lo schermo, ho ottenuto: 320px * 480px.

Tuttavia, quando ho creato un div di quelle dimensioni esatte è minuscolo. Cosa dà? Se una casella che è l'intera dimensione della risoluzione rilevata non occupa l'intero schermo?

Quindi, se sto progettando una pagina per iPhone e voglio occupare l'intero schermo in Safari (su iPhone) esattamente quale risoluzione dovrei progettare?

Sto utilizzando un iPhone 3G con iOS 4.0 come dispositivo di test.

Grazie per qualsiasi aiuto.

Answer 1

È necessario il meta tag viewport per comunicare all'iPhone che il sito Web è stato progettato specificamente per questo.

Utilizzare questa:

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

È possibile modificare le opzioni di ridimensionamento se è necessario che l'utente lo zoom, ecc ..

Anche se si desidera la vostra applicazione per lavorare in modalità orizzontale così, si può imposta la larghezza al 100%.

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

Answer 2

Dipende da quale iPhone. L'originale, 3G e 3GS sono 320x480, il 4.0 è doppio rispetto a 640x960. Se si progetta per la risoluzione più alta, i telefoni più vecchi ridurranno il 50% e andrà bene.

È possibile anche esaminare le query multimediali per ottimizzare l'esperienza dell'iPhone. C'è altro su questo in this blog post.

Answer 3

Il problema è che l'iPhone sta cercando di ridimensionarlo da solo. Se metti questo tag nella parte superiore della pagina, dirà al telefono "Non preoccuparti, gestirò il dimensionamento del contenuto per conto mio" e forzerà lo schermo a un rapporto 1: 1.

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

Answer 4

Le altre risposte sono corrette che è necessario configurare la finestra.

La documentazione ufficiale di Apple su questo è qui:

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

Vale la pena sfogliando il whole document - così come un sacco della descrizione del tag finestra, questo (completo di foto!) ha anche molti altri consigli utili per indirizzare le pagine web all'iPhone.

Answer 5

probabilmente si desidera utilizzare tutti questi

<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

In MonoTouch, provare

var yourFrame = FrameForOrientation(CurrentInterfaceOrientation); 

con questi metodi

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