强制桌面浏览器显示的网站

我已经被要求寻找是否有被显示在桌面Web浏览器的快捷方式，迫使我们的移动Web应用程序的移动版本。这是一种权宜之计，直到我们有足够的时间和资源完成在大于移动设备上正确呈现响应的工作。强制桌面浏览器显示的网站

我想到了桌面ifying我们的移动网络应用程序的第一件事就是给手机网站拉进一个IFRAME和强制的宽度和高度（414x736现在）。我希望通过这样做，CSS媒体选择可以达到414像素的宽度，但这不会发生。

如果我将视口的宽度转储到控制台，实际上显示的是414px的宽度，但是从附加的屏幕截图中可以看出，清楚CSS媒体选择不符合414px的宽度。

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

这里是一个相同的观点呈现到iframe中，其宽度和高度都分别被设置为414和736。帧大小是完美的功能，就像我想要的，但CSS媒体选择borked：

2017-05-30 Rjak

我认为最简单的方法是使用媒体查询并将宽度设置为100％，但是需要最大宽度，因此请使用max-width：414px（根据上图） – Keith

你可以操纵用户代理字符串来欺骗你的应用程序到发送的移动版本，如在此描述文章？ https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/

来源

2017-05-30 18:17:31 007

感谢您的建议。 https://stackoverflow.com/questions/12057890/fake-user-agent-for-iframe：我使用下面的文章的程序上设置的UserAgent在iFrame给它一个镜头。不幸的是它没有任何区别。我在调试器中确认UserAgent是我对iFrame内部请求的预期，所以看起来像是一个死胡同。 – Rjak

是否有一个它必须在iFrame中的原因？我认为这是一个难题。 – 007

绝对不是。要求是采用webapp，它在移动设备上呈现出色，并在1小时内使其在桌面上运行。做到这一点的正确方法是修改我们所有的风格，并使所有设备类型都能够正确响应。对我的要求是避免所有这些努力，并尝试查看是否有一个神奇的子弹。尽管iframe是我的第一个，并且让我非常接近，所以我认为这值得追求。 – Rjak

我敢肯定，这个解决方案是特定于我们的web应用程序，可能无法全面工作，并且这种解决方案并不完美。

谁最初执行该Web应用程序（在反应，和/终极版）斜靠在web应用程序的前一次迭代的CSS和图形资产的开发。我不知道为什么，但web应用程序本身具有应用于视这样的全球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>

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

这实际上是功能性的，虽然有定位的问题，并与偏移到图像映射问题（小姐汉堡菜单图标是由此引起的）。这是要需要通过整个应用程序走，并找出修正每个单件，但这种做法让我到功能的姿势，所以我很高兴现在它。

我会保持这个更新，我继续取得进展。

来源

2017-05-31 15:21:31 Rjak

强制桌面浏览器显示的网站

回答

相关问题