i am working on a b2b classified app where the ads are based on static html docs.
It is powered by multiple databases, elasticsearch etc. but the classified itself is a user/customer generated static html doc with a width of 740 and height of max 1200px.
Where i am really struggling with is the correct implementation of those static docs, since they are not responsive and i have to keep their company design when displaying them.
What i tried is to display the docs with a modal and embedded iframe, like this:
header... <ion-content> <div #frame style="width:100%;height:100%;overflow:scroll !important;-webkit-overflow-scrolling:touch !important"> <iframe [src]="adURL" class="iframe" scrolling="yes" ></iframe> </div> </ion-content> footer...
That almost works right, the docs are rendered nicely and the iframe is scrollable.
But because of the large size of the docs i need to make this somehow zoomable in a user friendly way.
My idea was to make use of the Gesture module and to add some functionality to zoom the iframe content.
With a first test i added the module and some logger like this:
this.gesture.on('pinch', e => console.log(e)); this.gesture.on('pan', e => console.log(e));
This did not really work. Sometimes i have got some event output, but most time there was nothing happening (tested on ios).
So i am wondering if there is might be another solution to make the iframe zoomable?
Since i am no iframe fan, i did try the inapp browser too, but even there it wasnt zoomable and this seems not be able to be embedded to display header/footers that include some related functionality.
I hope someone can give me a hint how to solve this