Making My iFrame site optimized for mobile.

My site works by having an image with all the content put in absolute-positioned divs, so it's not the easiest to make mobile friendly, especially not in the traditional "responsive-site" kind of way.

There were some hurdles trying to get it working, including this odd problem I've found where if you have a mobile viewport while also having the page scroll horizontally, there's a bunch of mysterious empty space at the bottom of the page. It's not even a part of <html> or any of the containing elements... Luckily, I solved that by making <html>'s overflow set to none, and body's position fixed, with overflow scroll, and width and height both 100%.

Touch-action: manipulation and overscroll-behavior: none were some properties I found while trying to make my website feel nice on mobile. They've honestly been a godsend. Double tap to zoom drives me nuts, especially since it's why tapping on mobile browsers is so delayed apparently! :S Also overscroll bounce does not feel nice on horizontal+vertical scrolling content.

My website contains a lot of writing too, and I found that scrolling horizontally to read isn't exactly ideal. I found a unique way to handle it, having a button that appears on mobile which toggles between a full website view where you can scroll horizontally and vertically, and a fullscreen content view where it shows the content of the iFrame exclusively.

Handling that the way I am really reminds me of how old console browsers such as the DSi browser worked, as they had to find a way to make websites usable on unique screens before a time of responsive websites, which I've always found interesting!