[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 475
  • Last Modified:

Navigating among iFrame child pages on iPhone or iPad

I'm retrofitting my website for mobile devices.  One aspect of the website uses iFrames.  A parent window loads various child windows while the user is engaged with a certain task.  This system performs fine on a desktop.  But on an iPad or iPhone, if the user zooms a section of a child window and clicks a link, opening another child window, that new window loads zoomed.  I know it isn't "the end of the world" for that to happen, but I would prefer that the new child window first appear completely visible in the viewport, both for asthetic reasons, and for the user's convenience.  I don't know how to accomplish that, and would appreciate guidance.

I've tried using the viewport meta tag on the parent window, but it seems to cause that window to load zoomed to begin with, which is even worse than the scenario I've described. Moreover, refreshing the parent window did not remove any zoomed scaling which was performed from a child window.  Simply refreshing the page doesn't restore original scaling.

You can visit the iFrame parent and child windows at http://mauitradewinds.com/Test/RezEasy/rezeasy.html
0
ddantes
Asked:
ddantes
  • 3
  • 3
1 Solution
 
COBOLdinosaurCommented:
About all I can give you is a hack.  The non-standard zoom property in CSS.  WARNING it is not support across all browsers.

body {zoom:normal;}
or
body {zoom:100%;}

because it is a hack, there is no guarantee it will continue working, or that it will be implemented across all browsers.

Cd&
0
 
ddantesAuthor Commented:
Thank you.  Would that code belong in the style sheet for the parent, the children, or both?
0
 
COBOLdinosaurCommented:
I think it would have to be on all the pages that are affected.  It would probably not inherit, but it will all depend on the implementation in the browsers.  Because it is non-standard there may be some variation and some may not have support at all.  My view would be that the safest way would be to put it a base stylesheet used by all pages, and be prepared to pull it out of any page where it does not work as desired.

Cd&
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ddantesAuthor Commented:
I will give it a try.  I plan to use javascript media query to load that style only for mobile devices.  I'll post back with results, and thank you for your suggestion.
0
 
ddantesAuthor Commented:
Unfortunately that didn't have any effect.  It was worth a try.
0
 
COBOLdinosaurCommented:
Sorry.  It was the only thing I though might work.  I didn't know how it would work out. :^(

Cd&
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now