Ширина экрана и большие изображения

Я пытаюсь использовать WebView для отображения большого изображения со встроенным мультитачом и попытки избежать сбоев памяти.

Я установил webView таким образом:

    setInitialScale(20);
    WebSettings settings = getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setSupportZoom(true);
    settings.setBuiltInZoomControls(true);

Затем загрузите следующий код:

<head>
<meta
    name="viewport"
    content="width=device-width, user-scalable=yes"
/>

</head>
<body
    style="margin: 0; padding: 0">
    <img
        alt="image"
        src="THE_SRC_GOES_HERE"
        id="theImage"
    >
</body>

Проблема заключается в том, что если он загружает средний образ (например, 1600x1200), он работает хорошо, и изображение соответствует ширине экрана.

Но если в моем примере изображение больше 7300x5200, оно выглядит как увеличенное изображение и с отключенным отключением.

Если вы хотите проверить изображения, то URL-адреса:

img1 & img2

ПРИМЕЧАНИЕ: Я не являюсь владельцем этих изображений, и я использую его только для тестирования

Ответ 1

Я думаю, что ваши изображения по-прежнему больше, чем окно просмотра по умолчанию. Попробуйте это

<html>
<head>
<meta
    name="viewport"
    content="width=device-width, user-scalable=yes"
/>

</head>
<body
    style="margin: 0; padding: 0">
    <img
        alt="image"
        src="http://www.deviantart.com/download/165022929/Wallpaper_2010_by_scrumen.png"
        id="theImage"
        style="width:100%"
    >
</body>
</html>

Ответ 2

Не знаю правильного ответа, но возможный walkarround может быть установлен img max-width на "не очень высокое значение", например, 2 * screen.width при загрузке страницы

Ответ 3

Я действительно получил это, работая над ICS, делая что-то немного противоречащее интуиции. В то время как другие предлагают добавить style="width:100%" в тег img, мое решение состоит в том, чтобы вместо этого добавить style="height:100%".

Это работает для меня на устройствах Android 4.0+, но, к сожалению, он начинает частично увеличиваться (поэтому высота изображения заполняет представление) на моих старых устройствах.

Это позволяет избежать проблемы с пробелом на всех тестируемых устройствах.
- ICS показывает пространство на начальном полностью увеличенном виде, но по мере того, как вы увеличиваете масштаб, оно исчезает точно так, как вы хотите.
- На старых устройствах никогда не бывает белого пространства из-за начального уровня масштабирования.
Масштаб не идеален, но намного лучше.
- В ICS вы получаете именно то, что хотите (совпадаете с шириной).
- На старых устройствах масштабирование значительно более управляемо, чем то, что вы получаете во втором примере в вопросе.

Короче говоря, я выполнил ваши требования по ICS и приблизил вас к более старым устройствам. Я отредактирую свой ответ, если придумаю что-нибудь еще, но это кажется целесообразным поделиться на этом этапе, даже если это несовершенно.

Ответ 4

Как насчет этого: (retracted - все еще не работает правильно)

<html>
<head>
<meta
    name="viewport"
    content="width=device-width, user-scalable=yes"
/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body
    style="margin: 0; padding: 0">
    <img onload="view = new Viewport(this.width, this.height)"
        alt="image"
        src="http://orbitingeden.com/orrery/textures/stars.jpg"
        id="theImage"
    >
<script>
    Viewport = function(width, height){
        var theImage = document.getElementById('theImage');
        this.width = width;
        this.height = height;
        this.set = function(){
            var metas = document.getElementsByTagName('meta');
            for(i=0; i<metas.length; i++){
                if(metas[i].name == 'viewport'){
                    metas[i].setAttribute('content','width=' + width + 
                                ', height='+ height + ', user-scalable=yes');
                    theImage.style.width = '100%';
                }
            }
        }
        this.set();
    }
    $('body').bind("gesturechange", function(event) {
        view.set();
    });

</script>
</body>
</html>

Ответ 5

Я больше работаю над веб-разработчиком, вот код, который работает на браузере android ics, это должно работать так же в веб-просмотре:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, width=device-width">
<style>
    html,body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
    #my-image{
        width:100%;
        margin:0;
        padding:0;
    }
</style>

</head>
<body>
    <img id="my-image" src="http://gachie.blog.com/files/2011/06/tour_eiffel.jpg"/>
</body>

Я тоже попробовал, что гораздо более сильное изображение (http://macjacart.ca/admin/Product_Images/8UhBphVEae.jpg), и оно работало плавно.

Надеюсь, что это поможет!

[EDIT]

Поскольку у меня недостаточно места для публикации в комментариях, я поставлю его там:

То, что вы хотите, - это, в основном, отрезать нижнюю часть окна просмотра, как только высота вашего изображения займет весь экран. Для этого вам нужен javascript, и поскольку javascript не имеет события масштабирования, это не потребует некоторых хаков. Так как поддержка Android поддерживает флеш, вы можете попробовать это решение для получения события масштабирования. Как только зум достигнет определенного уровня, который зависит от соотношения изображений, вы обновляете css своего изображения с высотой: 100% и задаете ширину авто.

В основном вы можете ограничить ширину или высоту, в зависимости от того, какой из них 100%. Вы также можете установить высоту прогрессивно на 100% по мере того, как пользователь увеличит масштаб, так или иначе вы увидите "прыжок" в какой-то момент.

Взгляните на эту статью, это может вам помочь.