HTML, как я могу разместить веб-страницу на экране? - PullRequest
Новая
       3

HTML, как я могу разместить веб-страницу на экране?

0 голосов
/ 27 февраля 2012

Я разрабатываю приложение для Android. мое приложение имеет очень большой размер (APKfile) из-за некоторых изображений высокого качества. Я решил перенести его на сервер и в приложение, просто загрузить веб-страницу и показать ее через веб-страницу. Каждая страница HTML имеет только одно изображение (без текста и других элементов), и все изображения имеют ширину 450 пикселей, в то время как высота может быть разной для каждого изображения. Когда я загружаю веб-страницу, изображение не помещается на экран и больше моего экрана. Мне нужно, чтобы изображение соответствовало экрану.

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

по некоторым причинам я не хочу полностью менять код, и я предпочитаю найти способ применить изменения к html-файлу. Мой HTML-файл: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Team Championship</title>
    </head>


    <body>
        <img align="left" alt="Team Championship" src="../image/team_championship.png"/>

    </body>
</html>

подскажите, пожалуйста, как можно настроить отображение изображения на всех устройствах? извините, хотя я не плох в программировании Android, я не знаком с веб-программированием Спасибо

Ответы [ 4 ]

2 голосов
/ 27 февраля 2012

Спасибо, ребята,

, но более простой и быстрый способ - изменить приведенный выше код изображения на этот: 

<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>

теперь на всех устройствах изображение помещается на экран.

1 голос
/ 31 марта 2012

Я работал на мобильном сайте.Тестовыми устройствами были iPod Touch и два телефона Android.С iPod Touch проблем не возникло, но телефоны Android настаивали на том, чтобы изображение было полноразмерным.Таким образом, вы могли видеть только около 25% изображения.Я искал на "веб-странице с графикой для устройства", и это привело меня сюда.

Добавление width = "100%" работало именно так, как мне нужно для моей проблемы.Просто!Спасибо.

0 голосов
/ 26 февраля 2014

Если вы используете WebView, лучший и самый простой способ - добавить тег стиля внутри тега head: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
             img{
                max-width:100%;
                height:auto;
                display:block;
                margin-left:auto;
                margin-right:auto;
             }
        </style>  
        <title>Team Championship</title>
    </head>


    <body>
        <img align="left" alt="Team Championship" src="../image/team_championship.png"/>

    </body>
</html>

Таким образом, ВСЕ ИЗОБРАЖЕНИЯ подходят ипо центру.

0 голосов
/ 27 февраля 2012

Если вы знаете размеры вашего изображения, вы можете установить масштаб для вашего веб-вида, например ::

DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);

int imgWidth = ...;
int imgHeight = ...;

if(imgWidth > displayMetrics.widthPixels) {
    int scaleInPercent = 100 * displayMetrics.widthPixels / imgWidth;
    m_webView.setInitialScale(scaleInPercent);
}

Просто добавьте чек на высоту, и все будет хорошо.

...