Webview + CSS3 неправильно масштабирует изображения на маленьких экранах - PullRequest
Новая
       3

Webview + CSS3 неправильно масштабирует изображения на маленьких экранах

1 голос
/ 02 декабря 2011

Я использую Webview и некоторые css3 для загрузки изображения и его масштабирования для заполнения экрана на устройстве Android любого размера.

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

Вот код:

HTML 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>*************</title>

    <style>
        * { margin: 0; padding: 0; }

        html { 
            background: url(images/1_1.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
</head>

<body bgcolor="#000000">



</body>

</html>

XML 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="#000000" android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView  
    android:id="@+id/mapview"
    android:background="#000000" android:scaleType="centerInside" android:layout_gravity="center_vertical|center_horizontal" android:clickable="false" android:fitsSystemWindows="true" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
    </LinearLayout>

Есть мысли?

Ответы [ 5 ]

3 голосов
/ 19 декабря 2011

Если у вас есть только одно изображение в html и вы хотите, чтобы оно вписывалось в устройство по ширине, вы можете просто использовать этот код: 

<head>
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
</head>

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

1 голос
/ 23 декабря 2011

вы можете использовать это: 

<img src="images/1_1.jpg" width="100%" style="position:fixed" />
<div style="width:100%;overflow:scroll-y;position:fixed;height:100%"></div>

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

0 голосов
/ 23 декабря 2011

Я не тестировал его всесторонне, но в последний раз, когда я пытался масштабировать изображения до полной ширины экрана любого устройства Android в WebView, я в итоге динамически внедрил некоторый код CSS, чтобы использовать * 1002.* собственность.Похоже, что это нормально работает на некоторых устройствах, с которыми я тестировал.

Чтобы воспользоваться преимуществом свойства max-width, я просто указал максимальную ширину, которая должна быть относительной, и установил ее на всю ширину, установив еедо 100%: 

img {
    max-width: 100%;
}

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

В качестве сноски: если выПоказываете только одно изображение, вы также можете загрузить его в ImageView.Это был бы более «нативный» подход и мог бы дать вам больше контроля над тем, как он масштабируется и отображается.

0 голосов
/ 21 декабря 2011

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

0 голосов
/ 20 декабря 2011

Создайте спецификацию CSS для переполнения, как это 

img {
  overflow: scroll;
}

Я не могу сказать больше об этом, не увидев использованные изображения в html. (Где вы используете изображение / пустые теги тела?)

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

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

...