Как я могу создавать HTML-страницы, которые автоматически корректируют свои изображения на разные размеры экрана для мобильных устройств?

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

HTML-страницы включают текст и изображения. Изображения могут быть больше 600x450, но если мобильный экран (например) 280x320, то изображения должны автоматически корректировать их размер, чтобы соответствовать.

Как я могу это сделать?

10
@Ekansh: webview является компонентом приложения смартфона, используемого для отображения HTML-страниц в приложении.
добавлено автор Paul D. Waite, источник
@Ekansh: Добро пожаловать. Нет, веб-браузеры, к счастью, все еще называют веб-браузерами, даже когда они работают на мобильных телефонах.
добавлено автор Paul D. Waite, источник
@Ekansh: вы собираетесь отображать это в webview? если так не беспокоиться о странице html.
добавлено автор Shadow, источник
Использовать проценты для размеров вместо PX?
добавлено автор Matt Clark, источник
нет, я прошу показать Html-страницу на смартфоне на базе Android
добавлено автор Ekky, источник
Я показываю, что html-страницы в смарт-приложении не в веб-просмотре
добавлено автор Ekky, источник
ok thanx для информации, я думал, что веб-браузер - это веб-браузер мобильного устройства, на самом деле я веб-разработчик и хочу создавать такие HTML-страницы, которые будут автоматически настраиваться на разных мобильных экранах
добавлено автор Ekky, источник
......................... :)
добавлено автор Ekky, источник
Webviews автоматически настраивает HTML-страницы, чтобы соответствовать их границам.
добавлено автор Lavakush, источник

5 ответы

Если страницы, о которых вы говорите, буквально содержат только текст и изображения, я думаю, что все, что вам нужно сделать на каждой странице HTML, это:

  1. Add this viewport meta tag inside the <head> tag:

    <meta name="viewport" content="width=device-width">
    

    This should make the page render at a reasonable size.

  2. Add this

    I think this will make sure all images don't render any wider than the app's webview's viewport.

    (If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

Тем не менее, ваш вопрос является слишком общим: мы могли бы написать книгу, охватывающую все возможности. Не могли бы вы сделать это более конкретным для кода, над которым вы на самом деле работаете?

12
добавлено
@Ekansh: Ура!
добавлено автор Paul D. Waite, источник
Спасибо своим работам отлично :)
добавлено автор Ekky, источник

Этот метод известен как жидкий или адаптивный макет, есть хорошее введение здесь

3
добавлено
Хорошая статья, кажется очень полезной
добавлено автор Renjith K N, источник

Медиа-запросы - лучший способ сделать то, что вы хотите.

Настройте свой html и таблицу стилей, как обычно, но в конце вашего документа CSS используйте что-то похожее на код ниже. Вам нужно будет разобраться с различными запросами на разные ширины и макеты устройства, но это должно вас начать.

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}
1
добавлено

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

for more details you can visit this tutorial - learn responsive design in easy steps

0
добавлено

Здесь есть много вариантов, самых подробных для обсуждения в одном вопросе.

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

  1. Use the User-Agent http header to identify the device which is connecting and redirect the user to the required website template.
  2. Use JavaScript to do the same as above.
  3. Use CSS to control each object's size. You could force each object to be a percent of the overall screen size, rather than a fixed value. CSS also provides a way to specify styles based on a given screen size: http://www.w3.org/TR/css3-mediaqueries/
0
добавлено
«Используйте HTTP-заголовок User-Agent для идентификации устройства, которое соединяет и перенаправляет пользователя на требуемый шаблон веб-сайта». - Нет. HTML предназначен для размещения в видовых экранах разных размеров. Если вы делаете это, вы делаете это неправильно.
добавлено автор Paul D. Waite, источник
Mobile Dev Jobs — вакансии и аналитика
Mobile Dev Jobs — вакансии и аналитика
6 187 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin и т.д. ВАЖНО: Правила публикации и правила канала: Ссылка – https://telegra.ph/Pravila-oformleniya-vakansij-i-rezyume-11-09-2

Android Developers
Android Developers
4 476 участник(ов)

Общаемся на темы, посвященным Android-разработке, SDK, Kotlin, Realm и т.д.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Android Architecture
Android Architecture
2 186 участник(ов)

Русскоязычный чат по архитектуре в андроид приложениях. Подробнее: http://telegra.ph/Android-Architecture-12-24

rus-speaking/android
rus-speaking/android
1 705 участник(ов)

Основной чат по Android разработке (вопрос-ответ). ПРАВИЛА: bit.ly/andr-rules. NEWS: bit.ly/AnrdResId ЧАТЫ: Основной: bit.ly/andr-main IDE, сборка, Git, сервисы: bit.ly/andr-tools Оффтоп: bit.ly/andr-offtop Конференции, события: bit.ly/andr-events Вакансии, найм: bit.ly/andr-job Архитектура: bit.ly/andr-patterns Rx: bit.ly/andr-rx Тестирование: bit.ly/andr-test Kotlin: bit.ly/andr-kotlin Хаmarin: bit.ly/andr-xamarin За мат, спам, агрессию, предложения о работе, оффтоп в этом канале - бан на сутки и более ☢☢☢

Android Dev Подкаст
Android Dev Подкаст
1 325 участник(ов)

Комната для обсуждения Android Dev подкаста apptractor.ru/AndroidDev/ Общее обсуждение Android: https://t.me/android_ru Остальные чаты про Android: http://t.me/devChats Наши новости https://t.me/androiddevpodcast_news

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Android Guards
Android Guards
602 участник(ов)

Обсуждение любых вопросов касающихся безопасности Android. - Защита системы и приложений - Уязвимости и эксплойты - Вредоносное ПО - Копание в кишках системы и приложений (RE)

Android JOB
Android JOB
466 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению Android (full-time, part-time, remote и разовые подработки)

AndroidDev :: Разработка. It's Android time now!
AndroidDev :: Разработка. It's Android time now!
458 участник(ов)

It's Android time now! Чат разработчиков Android. Вакансии, резюме и информацию о митапах размещать можно. Публикацию скрытой и явной рекламы ваших каналов и сайтов после получения разрешения от @olegushakov

Aandroid Talks!
Aandroid Talks!
212 участник(ов)

Чат об общих вопросах по ОС Android. Чат для разработки под андроид - pro.android: https://t.me/joinchat/AAAAAEKIFKnmRT9cMebb9w

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

Android Rus
Android Rus
68 участник(ов)