Сделайте макет предварительного просмотра рекламы на iOS и Android в веб-приложении, созданном с помощью Angular 5

Question

Я занимаюсь разработкой приложения Angular 5, которое должно использоваться рекламодателями для создания рекламы, которая будет отображаться на множестве различных мобильных устройств. Теперь клиент запрашивает экран предварительного просмотра для 3,5-дюймового экрана смартфона на Android и iOS.

Есть ли у вас какие-либо идеи, как визуализировать изображения в реальном времени, просто загруженные в режиме предварительного просмотра для iOS и Android - как отдельной страницы или как модальные - в настольном приложении?

Есть ли какая-либо инфраструктура JavaScript, которая может помочь с экранами и компоновками по умолчанию для обоих этих устройств?

Что-нибудь лучше, чем измененный iframe?

Answer 1

После моего комментария: я не знаю основы, которая может это сделать.

Но это довольно легко издеваться. Все, что вам нужно, это отобразить div, размер которого соответствует целевому экрану телефона.

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

Быстрый поиск iPhoneX дал мне размеры 2,436 х 1,125

Учитывая размер, давайте возьмем треть этого: 812 х 375

Теперь я не знаю кнопок на iPhone, поэтому не буду их отображать, но вот макет экрана iPhoneX:

#screen {
  height: 821px;
  width: 375px;
  border: 1px solid black;
  margin: auto;
}

#img-ad {
  height: 80%;
  background: teal;
  color: rgba(0, 0, 0, 0.54);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Helvetica;
  font-weight: bolder;
  font-size: 30px;
}

#txt-ad {
  height: 20%;
  background: tomato;
  color: rgba(0, 0, 0, 0.54);
  font-family: Helvetica;
  font-weight: bold;
  box-sizing: border-box;
  padding: 24px;
  text-align: center;
}

<div id="screen">
  <div id="img-ad"><span>80% of screen</span></div>
  <div id="txt-ad">Lorem Ipsum Dolor sit Amet, and I only remember this part</div>
</div>