So I found two solutions to the problem:
Solution 1:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div class='embed-container'><iframe src='https://client.myapp.com' style='border:0;'></iframe></div>
</body>
Solution 2:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
/* Using http://npr.github.io/responsiveiframe/ */
<script src="jquery.responsiveiframe.js"></script>
<script type='text/javascript'>
$(function() {
$('iframe').responsiveIframe({xdomain: '*'});
});
</script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<iframe src='https://client.myapp.com' style='border:0; width: 100%; height: 100%;'></iframe>
</body>
So far it appears both work just fine on a desktop browser (Chrome, Firefox) and on my mobile (Android 4)