0 Replies - 709 Views - Last Post: 24 June 2013 - 03:58 PM

#1 ccarsona  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 24-June 13

multiple viewports / different sizes

Posted 24 June 2013 - 03:58 PM

Kind of an involved question. Any direction and/or advice really appreciated.

The setup:

A page containing two DIVs, each containing an iframe that extend to screen size, and with proper index values so that div/iframe A overlays div/iframe B. B contains a full width website, while A contains elements that alter dynamically from a single icon to covering the entire screen

The problem:

In smaller screens, such as a phone or tablet, the viewport tag with width=device-width only produces, as expected, ONE set of factors to re-size the frames to fit the screen, and applies it to both iframes. This is true whether you use the tag in the host page or in A, B or A + B.

As expected, this causes the viewport to resize to fit all the much bigger B iframe and the much smaller A iframe in the same proportion.

In consequence, the content displayed in the A frame is much too small to be of any use.

What I need:
A way to control re-sizing separately, so that the two iframes re-size with different proportions.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1