Amazon S3 Static Website Iframe Responsive Problems

Amazon S3 has a neat and very affordable feature that allows users to host a static website from inside an S3 bucket. In 2017, I switched hosting of this website to the S3 bucket method. It reduced hosting costs per year significantly. However, there are a few catches when hosting a website out of an S3 bucket. The primary catch we will discuss today involves an iframe that is placed around content when not using the absolute URL to the Amazon bucket.

For example, this websites' absolute url within the Amazon system is: http://technogumbo.com.s3-website-us-east-1.amazonaws.com

Utilizing bucket and dns configurations, a user is able to load this content from their registered domain. When doing this, Amazon must load the content at the absolute url within an iframe.

The main website and the CSS associated with it were originally created before the iPad1 launched! It was before the responsive age we now live in. As a result; I did a few modifications when switching to the static S3 bucket configuration. However, the presence of the iFrame has been constantly breaking responsive display for this site since 2017. The resume section was created after the main site, so that has remained responsive despite the iframe.

Recently, I took the time to dig into the problem and figure out an intermediate solution. The core problem is that this website specifies an 800 pixel minimum width. There are several other features that push out to that width inside the three columns that make up the interior of the site. In modern mobile and desktop browsers, the viewport will initially scale a site with a fixed interior width like this!

With the presence of the Amazon iFrame the browser has no clue what the actual content size is and has no way to automatically scale the content.

The best solution would be to re-do the site and create a revised 2018 looking style. However, an intermediate few hour solution is this:

1. After the content loads, use Javascript to examine the device width.
2. If the device width is under our fixed width, 800px; set the scale of our body element to the desired size to be able to see most of the content inside the iframe.

Using these two steps, this will restore the nice functionality where the browser automatically scales the viewport so users can see the entire content area. This code uses jquery because it is already included in the site; but the basic Javascript DOM reference can allow you to easily select the main body. Here is the code I am using: