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

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

0 голосов
/ 14 мая 2018

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

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

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

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

1 Ответ

0 голосов
/ 14 мая 2018

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

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

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

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

Учитывая размер, давайте возьмем треть этого: 812 x 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>
...