Quelle est la résolution de l'écran de l'iPhone?

Question

Je sais que cela a été demandé, mais je suis toujours confus. J'essaye de construire une page mort-simple pour l'iPhone: logo en haut, numéro de téléphone, adresse, et un BG qui prend l'écran entier (non-répétition).

Lorsque j'ai exécuté un script qui affichait la largeur de l'écran et la hauteur de l'écran: 320px * 480px.

Cependant, lorsque j'ai créé un div de ces dimensions exactes, il est minuscule. Ce qui donne? Est-ce qu'une boîte de toute la taille de la résolution détectée ne doit pas occuper tout l'écran? Donc, si je conçois une page pour iPhone et que je veux qu'elle occupe tout l'écran de Safari (sur l'iPhone), quelle résolution devrais-je concevoir? J'utilise un iPhone 3G sous iOS 4.0 comme périphérique de test.

Merci pour toute aide.

Answer 1

Vous avez besoin de la méta-balise viewport pour indiquer à l'iPhone que votre site Web a été spécialement conçu pour cela.

Utilisez ceci:

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

Vous pouvez modifier les options de mise à l'échelle si vous avez besoin à l'utilisateur de zoomer etc ..

Aussi, si vous voulez que votre application fonctionne en mode paysage, ainsi, vous pouvez régler la largeur à 100%.

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

Answer 2

Cela dépend de l'iPhone. L'original, 3G et 3GS sont 320x480, le 4.0 est le double, à 640x960. Si vous concevez pour la résolution supérieure, les téléphones plus anciens réduiront de 50% et cela devrait bien paraître.

Vous pouvez également envisager d'utiliser des requêtes multimédias pour optimiser l'expérience de l'iPhone. Il y a plus à ce sujet dans this blog post.

Answer 3

Le problème est que l'iPhone essaie de le mettre à l'échelle tout seul. Si vous mettez cette balise dans la tête de votre page, elle indiquera au téléphone "Ne vous inquiétez pas, je vais gérer le dimensionnement du contenu par moi-même" et forcera l'écran à un rapport de 1: 1.

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

Answer 4

Les autres réponses sont correctes que vous devez configurer la fenêtre.

La documentation officielle d'Apple sur c'est ici:

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

Il vaut la peine d'écrémage à travers le whole document - ainsi que beaucoup de description de la balise de la fenêtre, il (avec photos!) a également beaucoup d'autres conseils utiles pour cibler les pages Web sur l'iPhone.

Answer 5

vous voulez probablement utiliser tous ces

<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

En MonoTouch, essayez

var yourFrame = FrameForOrientation(CurrentInterfaceOrientation); 

avec ces méthodes

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