Как привязать веб-страницу к ширине веб-просмотра при изменении размера веб-экрана (без перезагрузки)

У меня есть HTML-страница и полноэкранный веб-просмотр Android. Содержимое HTML больше видимой области веб-просмотра. Я хочу подгонять содержимое HTML к ширине веб-просмотра.

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

Еще одна вещь: поскольку контент был уменьшен, пользователь может увеличить масштаб до 100%. Когда контент будет увеличен и изменится ориентация, я хочу, чтобы содержимое снова соответствовало ширине.

Изменить 1: я могу изменить метатеги в голове HTML, но его содержимое остается больше видимой области веб-просмотра. Я поддерживаю Android 2.3 и более поздние версии.

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

TL; DR. Как всегда соответствовать большому HTML-контенту на ширину веб-браузера Android при изменении размера веб-контента без перезагрузки контента. (Я могу изменить веб-просмотр, но не много HTML.)

Ответ 1

выполните следующие настройки

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);

Ответ 2

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Это будет делать две вещи: width=device-width найдет ширину вашего устройства и отправит стили из вашего CSS, соответствующие этому размеру (вы можете устанавливать стили для определенных размеров в CSS, используя медиа-запросы). Initial-scale=1 заставит сайт отображаться со скоростью 100% при загрузке, но при этом даст пользователям возможность увеличить масштаб.

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

<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">

Это уменьшит ваш сайт, чтобы он соответствовал ширине устройства. Ничего особенного здесь, пользователи будут в основном просто показывать мини-настольные сайты.

Я бы рекомендовал прочитать эту Webdesign Tuts +. Они хорошо объясняют метатег viewport с примерами.

Ответ 3

Вам не нужно ничего менять в Webview, все, что вам нужно, это Отзывчивый Html Page, Если вы дизайнер, то это решит проблему ур или вы можете разместите часть ur вопроса с тегом пользовательского интерфейса.

Чтобы создать отзывчивые html-страницы, вы можете посетить: ЗДЕСЬ

Результат: вам нужно протестировать веб-просмотр, создавая свой отзывчивый html-страница, сам браузер-браузер по умолчанию отражает эту страницу ur html является отзывчивым или нет. Как только он будет работать в браузере по умолчанию на Android затем он будет работать в любом веб-браузере в android.

Тестирование: вы можете протестировать ur отзывчивую страницу html ЗДЕСЬ

Ответ 4

Мне нужно было бы увидеть источник вашего HTML и CSS. Вы должны использовать только% размеров и никогда не использовать размеры фиксированной ширины. Затем пользователь может изменить размер браузера, и он будет динамически изменять размер. Из-за этого я также использую% width. Он также динамически изменяет размер, если вы используете CTRL-MouseWheel (увеличение).

Ответ 5

здесь подсказка для отзывчивого веб-дизайна:

используйте позиции вместо ширины:

ех

HTML

<div id="somediv">I'm just a div, just a regular div.</div>

CSS

#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}

div выше будет автоматически изменяться в зависимости от ширины экрана.

edit: ответ ниже моего также поможет вам.