Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 125
Registered: ‎10-02-2011
My Device: Playbook
My Carrier: none

iFrame viewport

How can I display an iframe that will recognize it's source's viewport?

 

For example:

 

<iframe id="video-iframe" src="http://www.canada.com" frameborder="0" width="100%" height="1141"></iframe>

 

This will show the full desktop version of the site in the iframe. But if I visit canada.com in the z10 browser it shows the mobile site. I want to get the mobile site in the iframe.

Retired
Posts: 165
Registered: ‎09-24-2012
My Device: Passport
My Carrier: Bell

Re: iFrame viewport

Hi wmatt,

 

www.canada.com appears to check the window width, and size elements accordingly. This is what you need to do:

 

Set the parent HTML file's meta viewport tag to the following:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

This will ensure that window.innerHeight and window.innerWidth are 521x342 pixels (which is the CSS reference resolution that the browser applies automatically).

 

Next, set the iframe width and height to 521x342 - this will fill the screen:

<iframe name="frame1" src="http://www.canada.com/" height="521" width="342" frameborder="0"></iframe>

This will render the mobile site. For more information on CSS reference pixels, viewport and others, check out my KB here: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a...

 

Cheers,

Anzor

Developer
Posts: 125
Registered: ‎10-02-2011
My Device: Playbook
My Carrier: none

Re: iFrame viewport

PhoneGap seems to inject this viewport:

<meta name="viewport" content="initial-scale=0.4456824323103782,user-scalable=no">

 I'm getting the mobile site now, but it's not filling the page.

 

IMG_00000213.png

 

This is the screen containing the iframe and bbui actionbar:

<div data-bb-type="screen" data-bb-scroll-effect="off">
    <iframe name="frame1" src="http://www.canada.com/" height="521" width="342" frameborder="0"></iframe>
    <div data-bb-type="action-bar">
        <div data-bb-type="action" data-bb-style="tab" data-bb-selected="true" data-bb-img="img/computer.png">Link</div>
        <div data-bb-type="action" data-bb-style="tab" data-bb-img="img/computer.png">Link</div>
        <div data-bb-type="action" data-bb-style="button" data-bb-img="img/computer.png">Link</div>
        <div data-bb-type="action" data-bb-style="button" data-bb-img="img/computer.png">Link</div>
    </div>
</div>

 

Retired
Posts: 165
Registered: ‎09-24-2012
My Device: Passport
My Carrier: Bell

Re: iFrame viewport

[ Edited ]

You've struck a very fundamental issue with the web today and high density displays. (There is progress though Smiley Happy)

 

BBUI is setting your viewport so that it reports the full physical dimensions of 1280x768. This is done to make is easy for developers to deliver rich, high resolution images in WebWorks Apps without wizardry or hacks.

 

www.canada.com appears to be designed for CSS reference resolution, which on the Z10 browser reports 521x342, not 1280x768. The size of the iframe is used by this site (and many other sites designed to be cross-platform) to serve different styles. When your iframe is 1280x768 inside BBUI.js, the site decides that it is too high for a smartphone and instead serves up the tablet/desktop version. When your iframe is 521x342 (which is also what the browser reports), you do get the mobile version, yet the iframe does not fill the screen, because again, your viewport is 1280x768.

 

I don't see any way around this, aside from setting the viewport as described in my first post and ensuring it sticks (bare in mind, unless a UI framework is designed for other viewport settings, it will not scale automatically if the viewport changes and is likely to break).

 

 

Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: iFrame viewport

I hate anything device dependant - it sux

 

To this extent I wrote the Screen Display extension

 

This allows you to write accurately for the device (whatever it is - you just need the PPI)

 

A quick and effective alternate solution is this

 

        dpr = window.devicePixelRatio;
   
        var meta = document.createElement("meta");
        meta.setAttribute('name','viewport');

        if(dpr) // Set up the right meta
            {
            meta.setAttribute('content','initial-scale='+ (1/dpr) + ',user-scalable=no');
            }

This REQUIRES to be placed in the HEAD of index.html

 

It also allows you to adjust font sizes based on the dpr (set a base font size and mess with the CSS so it's the same size on every device)

 

My Screen Display provides better figures but requires fixups after load

 

The dpr is REALLY important and your number is WAY off (it's 2 on a Z10)

 

 

 




Click the like button if you find my posts useful!