Search code examples
htmlcssiframemobileviewport

Force desktop browsers to display mobile version of website

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

Solution

  • 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.