Question

我被要求查找是否有快速方法强制我们的移动Web应用程序显示在桌面Web浏览器上。这是一个权宜之计，直到我们有时间和资源完成响应在大于移动设备上正确呈现的工作。

我想到的第一件事就是桌面移动我们的移动网络应用程序是将移动网站拉入iFrame并强制宽度和高度（现在为414x736）。我希望通过这样做，CSS媒体选择将尊重414px宽度，但这不会发生。

如果我将视口的宽度转储到控制台，它实际上显示的是414px的宽度，但正如您将从附带的屏幕截图中看到的那样，很明显CSS媒体选择不符合414px宽度。

以下是我们想要看到的内容（这只是Chrome在iPhone 6设备模式下的调试程序的屏幕截图）：

这是渲染到iFrame中的相同视图，其宽度和高度分别设置为414和736。框架大小是完美的，功能正常我想，但CSS媒体选择是borked：

Answer 1

我愿意打赌这个解决方案特定于我们的webapp，可能无法全面运行，而且这个解决方案并不完美。

最初实现此webapp的开发人员（在React / Redux中）倾向于上一次webapp迭代的CSS和图形资产。我不确定为什么，但是webapp本身具有应用于视口的全局50％比例，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=0.5">

将以下样式应用于我的iFrame ......

...
.force-mobile {
    width: 750px;
    max-width: 750px;
    height: 1334px;
    margin: 0 auto;
    border-style: none;
    border-color: inherit;
    border-width: 0px;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    display: block;
}
...
<body>
    <iframe id="forceMobile" class="force-mobile" src="http://myhost/mobile/"></iframe>
</body>

...我得到了以下结果：

这实际上是功能性的，虽然存在定位问题，并且偏移到图像地图中的问题（缺少汉堡包菜单图标是由此引起的）。它需要遍历整个应用程序并找出每个单独部分的更正，但这种方法让我采取了功能性的姿势，所以我现在很高兴。

随着我不断取得进步，我会保持更新。

Answer 2

您是否可以操纵用户代理字符串以欺骗您的应用发送移动版本，如本文所述？ https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/

强制桌面浏览器显示移动版网站

2 个答案: