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

Question

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

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

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

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

Answer 1

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

但这很容易模仿。您所需要的只是显示一个与您所定位的手机屏幕大小相同的 div。

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

快速搜索 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>