UIWebView только с изображением, которое должно соответствовать всему виду - PullRequest
Новая
       1

UIWebView только с изображением, которое должно соответствовать всему виду

2 голосов
/ 12 января 2011

Итак, проблема, с которой я сейчас сталкиваюсь, заключается в том, что UIWebViews отображают одно изображение.Мне бы хотелось, чтобы изображение было уменьшено, если оно не подходит к месту, и сохранило бы его исходный размер, если нет.Итак, вот как я это делаю (в UIViewController): 

- (void)viewDidLoad {
    [super viewDidLoad];
    UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)];
    NSString *path =[[NSBundle mainBundle] bundlePath];
    NSURL *baseUrl =[NSURL fileURLWithPath:path];

    NSString *html = [NSString stringWithFormat:@"<html><head>"
//THE LINE ABOVE IS TO PREVENT THE VIEW TO BE SCROLLABLE
        "<script>document.ontouchstart = function(event) { event.preventDefault();  }</script>"
        "</head><body style=\"text-align:center;margin:0;padding:0\">"
        "<img src=\"banner.gif\" />"
        "</body>"
        "</html>"];             

    webView.scalesPageToFit = YES;
    [webView loadHTMLString:html baseURL:baseUrl]; 
    [self.view addSubview:webView];
    [webView release];
}

Это обрезает изображение и делает прокрутку веб-просмотра, что не является желаемым поведением.

Итак, я начал пытаться снекоторые CSS в теге image: 

"<img style=\"width:100%\" src=\"banner.gif\" />"

или 

"<img style=\"max-width:100%\" src=\"banner.gif\" />"

Я не знаю почему, но 100% не похоже на ширину UIView, это действительномаленький !(исходное изображение в представлении больше 320 пикселей, и вот результат:)

Too Small Image

Поэтому я попытался установить ширину тела: 

        "</head><body style=\"width:100%;text-align:center;margin:0;padding:0\">"
        "<img style=\"width:100%\" src=\"banner.gif\" />"

И что это делает, это просто предотвращает работу свойства text-align.Я также попытался удалить выравнивание текста, потому что, если ширина соответствует виду, это не нужно, но все равно не работает.Я также попытался установить размер изображения в соответствии с шириной вида, но тогда он не работал на устройствах с сетчаткой ... Я попытался установить в окне просмотра ширину устройства, но это не изменилось.

Любая идея окак это сделать?

Вот небольшой пример с 3-мя изображениями, которые я хотел бы разместить, на случай, если у вас есть время взглянуть

Ответы [ 2 ]

14 голосов
/ 12 января 2011

ОБНОВЛЕНИЕ: я нашел лучший способ сделать это с помощью Javascript, нет необходимости устанавливать sizeToFit

NSString *htmlString = [NSString stringWithFormat:
                        @"<html>"
                        "<head>"
                        "<script type=\"text/javascript\" >"
                        "function display(img){"
                        "var imgOrigH = document.getElementById('image').offsetHeight;"
                        "var imgOrigW = document.getElementById('image').offsetWidth;"
                        "var bodyH = window.innerHeight;"
                        "var bodyW = window.innerWidth;"
                        "if((imgOrigW/imgOrigH) > (bodyW/bodyH))"
                        "{"
                        "document.getElementById('image').style.width = bodyW + 'px';"
                        "document.getElementById('image').style.top = (bodyH - document.getElementById('image').offsetHeight)/2  + 'px';"
                        "}"
                        "else"
                        "{"
                        "document.getElementById('image').style.height = bodyH + 'px';"
                        "document.getElementById('image').style.marginLeft = (bodyW - document.getElementById('image').offsetWidth)/2  + 'px';"
                        "}"
                        "}"
                        "</script>"                         
                        "</head>"
                        "<body style=\"margin:0;width:100%;height:100%;\" >"
                        "<img id=\"image\" src=\"%@\" onload=\"display()\" style=\"position:relative\" />"
                        "</body>"
                        "</html>",url
                        ];


[webView loadHTMLString:htmlString baseURL:nil];

Старая версия (хотя не очень хорошо работает)

Мне не нравится отвечать на свой вопрос, но я так взволнован, что нашел решение этой проблемы!

Так что в основном то, что вам нужно сделать, это:

  1. Начать просмотр с реальным последним желаемым кадром: 

    webView = [[UIWebView alloc] initWithFrame:_desiredFrame];

  2. Добавьте свойство viewport и установите для этого свойства ширину изображения (я выбираю 1200px, поэтому он больше всех возможных устройств и не будет растягивать содержимое в два раза). вид и одобрение Apple. 

    NSString *html = [NSString stringWithFormat:@"<html><head>"
"<script>document.ontouchstart = function(event) { event.preventDefault();  }</script>"
"<meta name=\"viewport\" content=\"width=1200\"/>"
"</head>"
"<body style=\"margin:0;padding:0;\">"
"<img style=\"width:1200px\" src=\"%@\" />"
"</body>"
"</html>",imageName];

  3. Скажите представлению масштабировать его содержимое по размеру: 

    webView.scalesPageToFit = YES;

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

2 голосов
/ 19 мая 2011

Хорошее и простое решение - поместить этот код в тэг HTML <head>: 

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

Здесь вы можете определить масштаб и ширину зума.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...