Какое разрешение экрана у iPhone?

Question

Я знаю, что об этом спрашивали, но я все еще в замешательстве.

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

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

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

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

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

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

Answer 1

Вам нужен метатег viewport, чтобы сообщить 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 пытается масштабировать его самостоятельно.Если вы поместите этот тег в заголовок своей страницы, он скажет телефону: «Не волнуйтесь, я сам позабочусь о размере контента» и заставит экран отображать соотношение 1: 1.*

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

Answer 3

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

Официальная документация Apple по этому вопросу находится здесь:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

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

Answer 4

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

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