Solved

Navigating among iFrame child pages on iPhone or iPad

Posted on 2013-06-03
6
460 Views
Last Modified: 2013-06-06
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
Comment
Question by:ddantes
  • 3
  • 3
6 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39219291
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
 

Author Comment

by:ddantes
ID: 39219661
Thank you.  Would that code belong in the style sheet for the parent, the children, or both?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39219705
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:ddantes
ID: 39219716
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
 

Author Comment

by:ddantes
ID: 39219792
Unfortunately that didn't have any effect.  It was worth a try.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39219837
Sorry.  It was the only thing I though might work.  I didn't know how it would work out. :^(

Cd&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There is a security feature on iOS devices that is nearly impenetrable when it has been activated.  This article will provide some possible solutions as well as necessary steps to take to ensure you do not end up with a locked device.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…
CodeTwo Sync for iCloud (http://www.codetwo.com/sync-for-icloud?sts=6554) automatically synchronizes your Outlook 2016, 2013, 2010 or 2007 folders with iCloud folders available via iCloud Control Panel. This lets you automatically sync them with…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now