¿Cuál es la resolución de la pantalla del iPhone?

Question

Sé que esto se ha preguntado, pero todavía estoy confundido.

Estoy tratando de crear una página sencilla para el iPhone: el logotipo en la parte superior, el número de teléfono, la dirección y un BG que ocupe toda la pantalla (no repetir).

Cuando ejecuté un script que imprimía el ancho de pantalla y la altura de pantalla, obtuve: 320px * 480px.

Sin embargo, cuando creé un div de esas dimensiones exactas es muy pequeño. ¿Lo que da? ¿Debería una caja que tiene el tamaño completo de la resolución detectada ocupar toda la pantalla?

Por lo tanto, si estoy diseñando una página para iPhone y quiero que ocupe toda la pantalla en Safari (en el iPhone), ¿para qué resolución exactamente debería estar diseñando?

Estoy usando un iPhone 3G con iOS 4.0 como mi dispositivo de prueba.

Gracias por cualquier ayuda.

Answer 1

Necesita la metaetiqueta de la ventana para indicar al iPhone que su sitio web ha sido específicamente diseñado para ello.

Utilice esta:

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

Puede cambiar las opciones de escala si necesita el usuario para hacer zoom, etc ..

Además, si quieres que tu aplicación funcione en modo horizontal, así, se puede establece el ancho al 100%.

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

Answer 2

Depende de qué iPhone. El original, 3G y 3GS son 320x480, el 4.0 es el doble que, a 640x960. Si diseña para una resolución más alta, los teléfonos más antiguos lo reducirán en un 50% y se verá bien.

Es posible que también desee considerar el uso de consultas de medios para optimizar la experiencia del iPhone. Hay más sobre eso en this blog post.

Answer 3

El problema es que el iPhone está tratando de escalar por sí mismo. Si coloca esta etiqueta en el encabezado de su página, le dirá al teléfono "No se preocupe, manejaré el tamaño del contenido yo solo" y forzará la pantalla a una proporción de 1: 1.

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

Answer 4

Las otras respuestas son correctas de que debe configurar la ventana gráfica.

La documentación oficial manzana en esto está aquí:

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

Vale la pena hojear el whole document -, así como una mucho de la descripción de la etiqueta de la ventana gráfica, que (con fotos!) también tiene muchos otros consejos útiles para orientar páginas web al iPhone.

Answer 5

es probable que desea utilizar todos estos

<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, tratar

var yourFrame = FrameForOrientation(CurrentInterfaceOrientation); 

con estos métodos

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