Переход на iOS 7: правильная настройка видового экрана для jQuery/iPhone Webapps, просматриваемых на iPad

Ответ 1

В iOS 7 был изменен способ интерпретации метатега vieport. Здесь вы можете найти объяснение https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.0/#//apple_ref/doc/uid/TP40013202-CH1-SW75.

Ранее, когда параметры видового экрана были изменены, старые параметры никогда не были отброшены. Это привело к добавлению параметров видового экрана.

Например, если вы начали с width = device-width, а затем изменили до начального уровня = 1.0, вы получили вычисленный width = ширина устройства, начальная шкала = 1.0.

В iOS 7 это было рассмотрено. Теперь вы закончите с вычисленным viewport of initial-scale = 1.0.

Теперь возникает вопрос: как это повлияет на макет на iOS6 < и на устройствах Android?

Ответ 2

У меня было приложение для iPhone, которое только "ломалось" на iPad iOS7. Удаление "width = device-width" из метатега viewport исправлено.

Ответ 3

Я использовал ваш ответ, но он не решает всех моих проблем. Исходный размер остается с шириной ipad вместо iphone.

Также, когда я пытаюсь написать текст, экранное масштабирование будет заполнять текстовое поле, и только когда я нажму, измените размер экрана до его правильного размера iphone.

Мне все еще нужно правильное решение для этого.

Ответ 4

Мой ответ лучший, вы можете попробовать, Должен быть совместим с ios5/ios6/ios7, включая android

код:

<meta content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0" name="viewport" />

iOS7 uiwebview может захотеть изменить высоту:

код:

float version = [[[UIDevice currentDevice] systemVersion] floatValue];

self.webView = [[UIWebView alloc]init];
if (version >= 7.0)
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height);
}
else
{
    self.webView.frame=CGRectMake(0, 0, rect.size.width, rect.size.height-20);
}

Ответ 5

У меня была такая же проблема с телефонной связью, и удаление ширины устройства не помогло решить проблему.

Мне пришлось модифицировать Classes/MainViewController.m

Я изменил:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];

    return [super webViewDidFinishLoad:theWebView];
}

Быть:

- (void)webViewDidFinishLoad:(UIWebView*)theWebView {

    theWebView.backgroundColor = [UIColor blackColor];

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');$('body').animate({'opacity':1},300)"];
    }

    return [super webViewDidFinishLoad:theWebView];
}

* ОБНОВЛЕНИЕ *

- (void)webViewDidFinishLoad:(UIWebView*)theWebView
{
    // Black base color for background matches the native apps
    theWebView.backgroundColor = [UIColor blackColor];


    // iPhone app zoom on iPad with iOS 7 fix

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version >= 7.0)
    {

        [self.webView stringByEvaluatingJavaScriptFromString:@"if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.42 user-scalable=no');}"];
    }

    [self.webView stringByEvaluatingJavaScriptFromString:@"$('body').animate({'opacity':1},300)"];

    return [super webViewDidFinishLoad:theWebView];
}

Я переместил затухание в код за пределами оператора if как < iOS7 останется в непрозрачности 0 в противном случае

* END UPDATE *

Я использовал переменную "version" и оператор if для целевой iOS 7. Спасибо @leetvin

Затем уменьшили масштаб от увеличения в

Первоначально был прыжок между увеличенным в увеличенном масштабе и уменьшенным представлением, поэтому я устанавливал непрозрачность тела в 0 в css и анимировал/исчезал после изменения размера