Что такое разрешение экрана iPhone?

Question

Я знаю, что это было задано, но я все еще смущен.

Я пытаюсь создать простую страницу для iPhone: логотип наверху, номер телефона, адрес и BG, который занимает весь экран (без повтора).

Когда я запустил скрипт, который напечатал ширину экрана и экранное изображение, я получил: 320 пикселей * 480 пикселей.

Однако, когда я создал div этих точных размеров, он крошечный. Что дает? Должна ли коробка, размер всего обнаруженного разрешения, не занимать весь экран?

Итак, если я разрабатываю страницу для iPhone, и я хочу, чтобы она заняла весь экран в Safari (на iPhone) именно для какой резолюции я должен проектировать?

Я использую iPhone 3G под управлением iOS 4.0 в качестве своего тестового устройства.

Спасибо за любую помощь.

Answer 1

Вам необходимо использовать метатег для просмотра, чтобы сообщить 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; 
} 

Answer 2

Это зависит от того, какой iPhone. Оригинальные, 3G и 3GS - 320x480, 4.0 - это вдвое больше, чем у 640x960. Если вы разрабатываете более высокое разрешение, более старые телефоны уменьшат его на 50%, и он должен выглядеть нормально.

Возможно, вы захотите также просмотреть медиа-запросы, чтобы оптимизировать работу iPhone. Об этом в this blog post.

Answer 3

Проблема в том, что iPhone пытается масштабировать его самостоятельно. Если вы поместите этот тег в начало своей страницы, он сообщит телефону «Не волнуйтесь, я сам обработаю размер содержимого» и заставит экран соотносить 1: 1.

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

Answer 4

Другие ответы верны, что вам нужно настроить окно просмотра.

Официальное яблоко документация на это здесь:

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

Это стоит скользя через whole document - а также много из описания видового экрана тега, его (в комплекте с картинками!) также есть много других полезных советов для ориентации веб-страниц на iphone.

Answer 5

вы, вероятно, хотите использовать все эти

<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

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