Форум русской поддержки Joomla!® CMS
09.12.2016, 06:02:53 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

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

 (Прочитано 206 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Dannik
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 108


« : 22.07.2016, 15:35:49 »

Всем привет! Есть код с одного интересного сервиса https://hesus.ru.(Рассказываю не ради рекламы) Хотел поставить себе на сайт форму бронирования.
На сайте смотрится симпатично, но вот в мобильном часть режет.
Вот сам код
Код:
<div style='clear:both;'></div><iframe id='fhesus42362' src='https://hesus.ru/hesus/visor/id/2362' style='width: 300px;height:651px;margin: 0 auto;display: block;' frameborder=0 marginheight=0 marginwidth=0>Ваш браузер не поддерживает онлайн бронирование</iframe><div style='clear:both;'></div>

Подскажите пожалуйста если не сложно, что можно добавить что бы фрэйм стал адаптивен. Заранее благодарен Smiley
Записан
FitMe
Давно я тут
****

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 278



« Ответ #1 : 22.07.2016, 16:03:51 »

Как вариант можно так, или может поставить значение max-width:100%; в CSS
Код:
iframe {width:100%;}
Записан
vipiusss
Профи
********

Репутация: +261/-8
Offline Offline

Пол: Мужской
Сообщений: 4573


Skype: renor_


« Ответ #2 : 22.07.2016, 16:38:38 »

@media (max-width: *px) {
  #fhesus42362 {
    max-width:**%;
  }
}

где,
*-максимальный размер экрана устройства в пикселях;
**-процентное отношение для устройства показа дива по id (можно в em:max-width:**em;).

Также можно "играться" с добавлением only screen and и/или делать разные стили к разным устройствам.
И обязательно проверить подключение в index.php: например так  <meta name="viewport" content="width=device-width, user-scalable=no" />
Или так, как стоит в J! по дефолту в protostare: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Смотря с какой стороны у вас будет подход к данному решению.

Мини мануальчик пригодиться: http://frontender.com.ua/media-queries/

Также можете отдельно подключить стили и скрипт: https://habrahabr.ru/post/119127/
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet