Solution to Narrow/Fixed Width app

nlarson · Post by **nlarson** » Mon Mar 19, 2012 8:12 pm

For a while I had been struggling with scaling issues related to the many options users have for screen resolution. For example, I have 1920x1080 monitors, but most of my users are either on 1366x768 laptops, 1024px ipad., or a whole array of desktop resolutions. This creates a sticky wicket for creating an eye catching user experience. Many apps side-step this issue using a narrowing format with max-width or a Fixed width layout; which is the approach I have taken.

I was able to wrap the entire app in an iframe. This simple solution seems to work very well with some limits; all hover effects and menus will run off the page if they are "in the wrong spot". I have been able to fix 99.5% of this with minor layout changes. So for me, this solved many my scaling issues and seems to work great on an ipad2 since the frame limits the width of the VP, and the frame will scroll if the VP it too tall.

To pull this off it's pterry easy: from my website, the login link forwards the user to a page which just acts as a wrapper containing the aware login page.

Code: Select all

</head>
  <body>
<div align="center"><iframe src="http://yourappurl"; style="border:0px #FFFFFF none;" name="AwareiFrame" scrolling="yes" width="990px" height="98%" frameborder="0" marginheight="0px" marginwidth="0px"></iframe></div>
  </body>
</html>

To allow the UI to scale within predefined limits, swap 'width' for 'max-width'.