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

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

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

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

Ответы

Ответ 1

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

  • Добавьте этот метатег просмотра в тег <head>:

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

    Это должно сделать рендеринг страницы с разумным размером.

  • Добавьте тег <style> внутри тега <head>:

    <style>
img {
    max-width: 100%;
}
</style>

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

    (Если это не сработает, попробуйте width: 100%;. Это определенно сделает все изображения такими же широкими, как и окно просмотра, и, следовательно, не будет шире.)

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

Ответ 2

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

Ответ 3

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

Настройте свой 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 */
}

Ответ 4

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

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

  • Используйте HTTP-заголовок User-Agent для идентификации устройства, которое подключает и перенаправляет пользователя к требуемому шаблону веб-сайта.
  • Используйте JavaScript, чтобы сделать то же, что и выше.
  • Используйте CSS для управления размером каждого объекта. Вы можете заставить каждый объект быть процентом от общего размера экрана, а не фиксированным значением. CSS также предоставляет способ указания стилей на основе заданного размера экрана: http://www.w3.org/TR/css3-mediaqueries/

Ответ 5

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

Для более подробной информации вы можете посетить этот учебник - быстро изучить адаптивный дизайн