Как адаптировать сайт html под мобильные устройства: 3 способа быстро адаптировать сайт под мобильные устройства | SiteClinic.ru

html — Как адаптировать сайт под мобильные устройства?

Как адаптировать сайт под все мобильные устройства?

• html
• css

Для адаптации используют @media запросы CSS. Синтаксис такой:

@media(Условие){
стили
}

Например,

@media(max-width: 992px){
/*Стили, на устройствах с максимальной ширеной экрана 992 пикселя и меньше */
}
@media(max-width: 768px){
/*Стили, на устройствах с максимальной ширеной экрана 768 пикселей и меньше */ 
}
@media(max-width: 500px){
/*Стили, на устройствах с максимальной ширеной экрана 500 пикселей и меньше */
}

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

Еще стоит почитать про подходы к адаптивной верстке mobile-first и desktop-first. Сравнивают их во многих статьях, например, тут.

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

1. Писать только один экземпляр медиа-запроса, как выше и в конце файла css, что не всегда удобно.
2. Использовать сборщики с предустановленными плагинами, которые автоматизируют рутинные задачи верстки (подключение и конвертация шрифтов, сжатие картинок, группировка медиа-запросов, подстановка префиксов для разных браузеров). Я использую для этого сборку gulp с плагином gulp-group-css-media-queries и некоторыми другими. Хороший гайд по настройке найдите в ютубе, сборок тьма. Есть еще сборщик webpack, говорят он лучше, точно новее, но с ним не работал, так как привык к gulp.

Варианта по идее только 2. Вы можете использовать поддомен для сайта и на нем размещать отдельную версию сайта, созданную для удобного просмотра на смартфонах. Или же, более оптимальный и менее затратный вариант — вы используете для этих целей CSS.

А именно — медиа запросы. Суть в том, что например, при ширине окна браузера < 400px, можно изменять нужные вам стили, скрыть какие-то блоки, например, скрывать боковые блоки меню. А при ширине окна > 800px — отображать элементы, которые рассчитаны на десктопную версию шаблона. Гуглите в сторону медиа запросов, это очень полезная и нужная вещь, если вы хотите создать сайт с адаптивным и отзывчивым шаблоном!

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Как адаптировать видео под мобильные устройства

Вопрос задан 5 лет 2 месяца назад

Изменён 5 лет 2 месяца назад

Просмотрен 2k раз

Я вставил код видео с одного видеопортала на сайт. Все бы хорошо, вот только на мобильных устройствах видеозапись отображается СЛИШКОМ громоздкой, можно ли сделать так, что бы на компьютере и на мобильных устройствах видео отображалось разного размера. Может, размер как-нибудь в css можно изменить?

Код:

<iframe src="//video.sibnet.ru/shell.php?videoid=3291274" frameborder="0" scrolling="no" allowfullscreen></iframe>

• html
• css
• iframe

Убрать инлайн стили, и управлять CSS, при таком подходе придется с высотой повозиться на media запросах

. video iframe {
  width: 100%;
  max-width: 640px;
  height: 380px;
}

@media(max-width: 680px) {
  .video iframe {
    max-width: 100%;
    height: 300px;
  }
}

@media(max-width: 4800px) {
  .video iframe {
    height: 250px;
  }
}

<div>
<iframe src="//video.sibnet.ru/shell.php?videoid=3291274" frameborder="0" scrolling="no" allowfullscreen></iframe>
</div>

Адаптивное видео (css из html следует перенести куда следует, кусок кода взял из результата работы своего js скрипта):

<div>
  <div>
    <iframe src="https://video.sibnet.ru/shell.php?videoid=3291274/" scrolling="no" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
  </div>
</div>

P.S. Тут отказывается работать, смотреть демо следует на https://jsfiddle.net/z9xyprht/ (там и ширину окна можно мышкой поменять).

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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

Есть ли простой способ настроить HTML-страницу автоматически для пользователей мобильных телефонов? Моя страница: http://www.

xiexianhui.com/baxjoomla15/index0.html явно не подходит для моего телефона Sony Xperia Ray.

• html
• мобильный

1

Сначала вам следует ознакомиться с концепциями адаптивного веб-дизайна. Их слишком много, и этот вопрос слишком общий, чтобы ответить на все. Но в двух словах требует 3 компонента:

1. Медиа-запросы для доставки разных стилей CSS на разные размеры экрана.
2. Гибкая css-сетка, поэтому макет сайта автоматически адаптируется к размеру экрана.
3. Гибкие изображения, поэтому все изображения плавно уменьшаются, чтобы они не перекрывали контейнер содержимого.

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

и ваша страница полностью уместится на экране. Но вы заметите, что теперь все исключительно маленькое и непригодное для использования.

Отзывчивый веб-дизайн является решением для этого.

3

В дополнение к тому, что уже было сказано: WURFL, http://wurfl.sourceforge.net/, универсальный файл ресурсов беспроводной связи, представляет собой репозиторий описаний устройств (DDR), т. е. программный компонент, который сопоставляет заголовки HTTP-запросов с профиль HTTP-клиента (настольный компьютер, мобильное устройство, планшет и т. д.), отправившего запрос.

Один короткий путь: подготовьте 3 различных макета, которые охватывают основные старые телефоны, новые красочные телефоны и телефоны и КПК с расширенными функциями. Это довольно простая задача и в то же время дает отличные результаты. Я бы тоже посмотрел эту ссылку. http://mobiforge.com/developing/story/introduction-wurfl

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

css — Как сделать такой же макет сайта для мобильных устройств (не адаптивный)

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

Если вы видите этот веб-сайт с мобильного или аналогичного устройства, такого как небольшой ноутбук и т. д. (или изменяя размер до маленького браузера), вы увидите следующее:

Вы видите, что синий div не может заполнить 100% ширины браузера, хотя этот div был определен со 100% шириной! Посмотрите на серый div ниже части этих изображений.

На нормальном этапе как синий (div.top), так и серый (div#gcontent) div находятся в центре браузера, но на маленьком экране серый div заполняет 100% ширины, тогда как синий div не может заполнить 100% ширины. В чем причина. Как я могу это исправить?

структура этого:

 <тело>
    
    <дел>
        <дел>
            <дел>
                
Lorem Ipsum — это просто фиктивный текст... Lorem Ipsum.