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

Question

有人问我是否有一种快速的方法可以强制我们的移动网络应用程序在桌面网络浏览器上显示。这是一个权宜之计，直到我们有时间和资源来完成在大于移动设备上正确响应渲染的工作。

对于桌面化我们的移动 Web 应用程序，我想到的第一件事是将移动网站拉入 iFrame 并强制设置宽度和高度（目前为 414x736）。我希望通过这样做，CSS 媒体选择将支持 414px 宽度，但这并没有发生。

如果我将视口的宽度转储到控制台，它实际上显示了 414 像素的宽度，但是正如您从所附的屏幕截图中看到的那样，很明显 CSS 媒体选择没有得到遵守414px 宽度。

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

这是渲染到 iFrame 中的同一个视图，其宽度和高度分别设置为 414 和 736。框架尺寸完美，功能如我所愿，但 CSS 媒体选择很乏味：

Answer 1

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

Answer 2

我敢打赌，这个解决方案是针对我们的 webapp 的，可能无法全面工作，而且这个解决方案并不完美。

最初实现此 Web 应用程序（在 React/Redux 中）的开发人员依赖于 Web 应用程序先前迭代的 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>

...我得到以下结果：

这实际上是实用的，尽管存在定位问题，以及图像映射的偏移问题（丢失的汉堡菜单图标就是由此引起的）。这将需要遍历整个应用程序并找出对每个单独部分的更正，但这种方法让我有了一个实用的姿势，所以我现在对此很满意。

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

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

Force desktop browsers to display mobile version of website

html

css

iframe

mobile

viewport