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

【问题标题】：Force desktop browsers to display mobile version of website强制桌面浏览器显示网站的移动版本
【发布时间】：2017-05-30 16:52:54
【问题描述】：

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

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

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

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

这是渲染到 iFrame 中的相同视图，其宽度和高度已分别设置为 414 和 736。框架大小完美，功能如我所愿，但 CSS 媒体选择很糟糕：

【问题讨论】：

我认为最简单的方法是使用媒体查询并将宽度设置为 100% 但具有您想要的大小的最大宽度，因此使用 max-width: 414px （基于你上面的照片）

标签： html css iframe mobile viewport

【解决方案1】：

我敢打赌，这个解决方案是特定于我们的 web 应用程序的，可能无法全面运行，而且这个解决方案并不完美。

最初实现此 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>

...我得到以下结果：

这实际上是功能性的，尽管存在定位问题，以及图像映射中的偏移问题（缺少汉堡菜单图标是由此造成的）。这将需要遍历整个应用程序并找出对每个单独部分的修正，但这种方法让我获得了功能性的姿势，所以我现在对此感到满意。

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的建议。我尝试使用以下文章为 iFrame 程序设置 UserAgent：stackoverflow.com/questions/12057890/fake-user-agent-for-iframe。不幸的是，它没有任何区别。我在调试器中确认 UserAgent 是我对 iFrame 内请求的预期，所以看起来这是一个死胡同。
它是否必须在 iFrame 中？我认为这是困难的根源。
绝对不是。要求是在移动端呈现出色的 web 应用程序，并使其在 1 小时内在桌面上运行。正确的做法是修改我们所有的样式并使整个事情在所有设备类型上都能正确响应。对我的要求是避免所有这些努力，并尝试看看是否有灵丹妙药。 iframe 是我的第一个框架，它让我非常接近，所以我认为它值得追求。