在使用 Angular 5 构建的网络应用程序上模拟 iOS 和 Android 上的广告预览

Question

我正在开发一个 Angular 5 应用程序，广告商可以使用它来创建要在许多不同移动设备上显示的广告。客户现在要求 Android 和 iOS 上的 3.5 英寸智能手机屏幕的预览屏幕。

您是否有任何想法如何在桌面应用程序中为 iOS 和 Android 呈现刚刚以预览模式上传的实时图像 - 无论是作为单独的页面还是作为模式？

是否有任何 JavaScript 框架可以帮助这两种设备的默认屏幕和布局？

有什么比调整大小的 iframe 更好的吗？

Answer 1

根据我的评论：我不知道可以做到这一点的框架。

但它很容易被嘲笑。您只需要显示一个 div 大小与您所针对的 phone 屏幕大小相同的内容。

您不需要太多代码和浏览器兼容性，因为您只想显示图像和一些文本。我很确定所有浏览器都能处理。

快速搜索 iPhoneX 得到尺寸 2.436 x 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>

在使用 Angular 5 构建的网络应用程序上模拟 iOS 和 Android 上的广告预览

Mock an ad preview on iOS and Android on a web app built with Angular 5

android

ios

angular

graphic-design