Hello,
This is kind of an involved “question.” Any direction and/or advice is greatly 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.