在桌面浏览器上渲染手机图像内的移动模拟视图

Question

我对SO相对较新，这是我的第一个问题，所以我希望我的格式和问题信息正确。我正在寻找可以帮助我解决特定显示问题的插件或工具。

我有一个部署到 Android 和 iOS 设备的移动应用程序。我还有一个移动 Web 应用程序，当用户在其移动设备上浏览服务器后端云服务网站的某些部分时，它的呈现非常类似于移动设备 Web 浏览器中的实际移动应用程序。到目前为止一切顺利。

但是，当用户在台式机/笔记本电脑上浏览云服务网站的这些部分时，他们会看到 Web 应用程序视图 - 其中一些内容被拉伸且未得到理想优化，因为这实际上是为了在移动设备上查看。客户希望用户在台式机/笔记本电脑浏览器上能够看到 Web 应用程序的移动“模拟”视图。

它必须在用户导航到页面时发生，而不是通过安装 chrome 插件等

我认为理想的解决方案是类似于通用移动设备的 i图像，用于在桌面上浏览时，以桌面屏幕为中心，在其中呈现 Web 应用程序视图。 是否有人提供插件/工具为此，我做了相当多的研究，只能找到有关模拟器的信息以进行测试等。在某种程度上，我所寻找的是一个可以动态调整大小的图像，可以在其中渲染视图，在许多情况下看起来都很好桌面屏幕尺寸/分辨率等。与其自己去解决这个问题（这对我来说是一个 CSS 学习曲线），如果这样的东西已经存在那就太好了。

像上面这样的实现将释放屏幕上的空间用于客户想要的其他项目，例如链接和表单按钮

对此的任何指示将不胜感激。

Answer 1

我确实喜欢这样：

使用

position: relative

将图像设置为背景图像。 使用

position: absolute

将内容放入 div 中。 并使用以下函数设置 div 边距。

您需要在浏览器上通过console.logs手动查找topFrameDivider、bottomFrameDivider和sideFrameDivider。它们是帧与整体图像的比率。

function updateMargins() {
      const innerScreenRatio = window.innerWidth / window.innerHeight;
      const phoneFrameRatio = backgroundImage.width / backgroundImage.height;

      const isMaxHeight = innerScreenRatio > phoneFrameRatio;

      console.log('isMaxHeight', isMaxHeight);

      const topFrameDivider = 9.62;
      const bottomFrameDivider = 11;
      const sideFrameDivider = 27.6;

      let top: string, bottom: string, left: string, right: string;

      if (isMaxHeight) {
        const phoneWidth = window.innerHeight * phoneFrameRatio;
        const emptyHorizontalSpace = window.innerWidth - phoneWidth;
        const sideMargin =
          emptyHorizontalSpace / 2 + phoneWidth / sideFrameDivider + 'px';

        top = window.innerHeight / topFrameDivider + 'px';
        bottom = window.innerHeight / bottomFrameDivider + 'px';
        left = sideMargin;
        right = sideMargin;
        console.log('phoneWidth', phoneWidth);

        setMargin({top, bottom, left, right});
      } else {
        const phoneHeight = window.innerWidth / phoneFrameRatio;
        const emptyVerticalSpace = window.innerHeight - phoneHeight;
        const topMargin =
          emptyVerticalSpace / 2 + phoneHeight / topFrameDivider + 'px';
        const bottomMargin =
          emptyVerticalSpace / 2 + phoneHeight / bottomFrameDivider + 'px';

        top = topMargin;
        bottom = bottomMargin;
        left = window.innerWidth / sideFrameDivider + 'px';
        right = window.innerWidth / sideFrameDivider + 'px';

        setMargin({top, bottom, left, right});
      }

    }
    window.addEventListener('resize', updateMargins);