2

I have been asked to find if there is a quick way to force our mobile web application to be displayed on desktop web browsers. This is a stopgap-measure until we have the time and resources to finish work on responsively rendering correctly on larger-than-mobile devices.

The first thing I thought of for desktop-ifying our mobile webapp was to pull the mobile site into an iFrame and force a width and height (414x736 for now). I was hoping that by doing so, the CSS media selections would honor a 414px width, but that is not happening.

If I dump the width of the viewport to the console, it is in fact showing a width of 414px, but as you will see from the screenshots attached it's clear that the CSS media selections are not honoring a 414px width.

Here is what we want to see (this is just a screenshot of Chrome's debugger in iPhone 6 device mode):

What We Want

Here is that same view rendered into an iFrame whose width and height have been set to 414 and 736 respectively. The frame size is perfect and functions just as I want, but the CSS media selections are borked:

What I Have

Rjak
  • 2,097
  • 4
  • 19
  • 24
  • I would think the easiest way to do it is use media queries and set the width to 100% but have a max-width of the size you want, so use max-width: 414px ( based on your picture above ) – Keith May 30 '17 at 17:04

2 Answers2

2

I'd be willing to bet that this solution is specific to our webapp and might not work across the board, and this solution was not perfect.

The developer who originally implemented this webapp (in React/Redux) leaned on the CSS and graphics assets of a previous iteration of the webapp. I'm not sure why, but the webapp itself has a global 50% scale applied to the viewport like this:

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

By applying the following styling to my 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>

... I got the following result:

Almost Success

This is actually functional, although there are positioning issues, and issues with offsets into image maps (the missing hamburger menu icon is caused by this). It is going to require walking through the whole app and figuring out corrections to each individual piece, but this approach got me to a functional posture, so I'm happy with it for now.

I will keep this updated as I continue making progress.

Rjak
  • 2,097
  • 4
  • 19
  • 24
0

Can you manipulate the user agent string to fool your app into sending the mobile version, as described in this article? https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/

007
  • 401
  • 4
  • 4
  • Thanks for the suggestion. I gave it a shot using the following article for procedurally setting the UserAgent for an iFrame: https://stackoverflow.com/questions/12057890/fake-user-agent-for-iframe . Unfortunately it made no difference. I confirmed in the debugger that the UserAgent was what I expected for the requests inside the iFrame, so looks like this is a dead end. – Rjak May 30 '17 at 18:32
  • Is there a reason it must be in an iFrame? I think this is a source of difficulty. – 007 May 30 '17 at 21:30
  • Absolutely not. The requirement is to take the webapp, which renders great on mobile, and make it operate on desktop in under 1 hour. The correct way to do it is to revise all our styles and make the whole thing properly responsive on all device types. The ask for me is to avoid all that effort and try to see if there's a magic bullet. An iframe was my first though and has gotten me pretty close, so I figured it was worth pursuing. – Rjak May 31 '17 at 14:35