Айфоновский iFrame - Joomla 3.x: Общие вопросы

Такая задача. Нужно мобильную версию одного сайта показать именно в рамочке.

Например iPhone или какой нибудь смартфон.

Так что вам надо? У вас есть адаптивно сверстанный шаблон? Если да то ищите эмуляторы, если нет и срочно надо сделать вывод ищите компоненты, а лучше садитесь и делайте адаптивный вариант.

Вот тут интересный вопрос встает: та часть экрана, которая во фрейме будет отображать сайт, эмулируя его поведение на айфоне, явно будет иметь не айфоновскую ретину, так что придется либо искать/самому писать компонент эмуляции типов устройств, либо то, что будет выводится фреймом, не будет полноценной эмуляцией, соот-но вы не получите достоверную картинку.

Уточню. Уже имеется HTML5 приложение. То есть, у мобильного приложения под iOS и Android есть версия HTML.

Но если перейти по этому адресу, то она во весь экран выводит - bshkk.medik.kg

Идея такова:

1. Есть java script который перенаправляет на моб. версию если определяет, что заходят с моюильного.
2. Хочется, чтобы при входе на сайт (например b.сайт.ру) с компа, то открывался страница в котором есть iframe (с готовым адаптивным bshkk.medik.kg), в котором есть уже готовая мобильно адаптированная. Что-то вроде онлайн теста приложения. Ну или альтернатива, когда нет смартфона.

Ищу решение для второго. То есть iframе с рамкой какого либо телефона.  

Ну и в чем проблема? Если у вас адаптивный CSS, то делаем для iframe фиксированную высоту и ширину. Прячем скролл.
Оборачиваем фрейм в div с бэкграундом iPhone в png с вырезанным экраном.

Ну и в чем проблема? Если у вас адаптивный CSS, то делаем для iframe фиксированную высоту и ширину. Прячем скролл.
Оборачиваем фрейм в div с бэкграундом iPhone в png с вырезанным экраном.

Спасибо за то, что указал направление. Все получилось!

• Сделал iframe с фиксированным размером, который равен пропорциям экрана,
• Его положил в div с центральным align + фон айфон,
• Рамки справа и слева сделал одиннакого размера, чтобы iframme был как раз в центре.
• Дальше установил padding-top с размером от верхнего края до начала экрана.
• Еще прописал фону no-repeat

результат: http://BSHKK.SU.KG/iphone-6-plus/

не хватает границ экрана, лучше бы айфон черным нарисовали.

Спасибо за то, что указал направление. Все получилось!

• Сделал iframe с фиксированным размером, который равен пропорциям экрана,
• Его положил в div с центральным align + фон айфон,
• Рамки справа и слева сделал одиннакого размера, чтобы iframme был как раз в центре.
• Дальше установил padding-top с размером от верхнего края до начала экрана.
• Еще прописал фону no-repeat

результат: http://BSHKK.SU.KG/iphone-6-plus/

Неплохо, но можно еще лучше: в самом приложении добавить параметр какой-нибудь, который будет прятать системный скролл (overflow-y: hidden), но заместо поставить какой-нибудь на JS, т.к. у iPhone нет скроллбаров

Подойдет что-то типа этого: http://jscrollpane.kelvinluck.com/

P.S.: Почему бы не взять реальные фотки устройств в большом разрешении? HTC One выглядит как будто его школьник рисовал по памяти