Webbrowsercomponent - html/webpage scaling

General JUCE discussion
1

I have a the webbrowsercomponent configured in my app and, overall, it is working fine (tested on OSX and IOS so far - Android to come).

However, I notice that when I rotate the device between landscape and portrait the typical resizing of the web page that browsers do (safari for example) is not occurring.

Example screen shots from my iPad:

(Juce)

https://dl.dropboxusercontent.com/u/9116971/JUCELandscape.PNG

https://dl.dropboxusercontent.com/u/9116971/JUCEPortrait.PNG

(Safari)

https://dl.dropboxusercontent.com/u/9116971/SafariLandscape.PNG

https://dl.dropboxusercontent.com/u/9116971/SafariPortrait.PNG

Landscape looks right, but portrait seems to keep the same level of scale/zoom as was used for landscape vs. resizing the content to fit portrait. Should this work? Did I perhaps miss a call or setting somewhere that is required for this to work?

Thanks!

-Gerald

(btw, does the attachment feature for this forum work? I've tried uploading images as .png, .jpg and .pdf. All of them were < 1MB yet all fail to upload)

 

2

Hi, I just tried this with the JuceDemo (in the examples folder) and the WebBrowser demo did rescale correctly on our iPad when we rotated the device. I couldn't find the URL of the website of your screenshots but it worked with www.juce.com :-)

3

I just ran the demo on my ipad (ios 8.3) as well and, while the browser component changes sizes corectly, the contents within it are not scaled to fit when in portrait. I have to drag the web page contents left and right with a finger swipe to see the full page. And, it's easy to see that the fonts are not changing size either.

But, when I run safari and do the same I can always see the entire www. juce.com page in both portrait and landscape and the web page fonts are grow and shrink appropriately.  No swiping back and forth required to see the full web page.

So, the demo is behaving just like I reported my app does in my first post above.

 

4

On our iPad mini the top tabs on the JUCE webpage (HOME | FEATURES …) re-orders into two rows when rotated to portrait mode so that it fits the screen. I’m already out of the office now so I don’t know which iOS version I’m running but I’ll follow up on Monday.

5

Interesting. I can forward screenshots, device info, etc. for what I'm seeing if it helps. Let me know.

 

Thanks,

-gerald

6

I believe that website has javascript to detect the browser and changes the layout for the differences.

Rail

7

Hmmm, I've been trying to figure out this issue. It's hard to test because there definitely is some re-flowing going on when I rotate the device and without being able to test your particular website it's hard for me to know when I have solved your problem.

One thing I did notice is that Safari's behaviour is more consistent to JUCE's WebBrowserComponent when scalesPageToFit is true. To do this temporarily add the following line at the end of the goToURL method at JUCE/modules/juce_gui_extras/native/juce_mac_WebBrowserComponent.mm, line 266:

    void goToURL (const String& url,
                  const StringArray* headers,
                  const MemoryBlock* postData)
    {
                     .
                     .
                     .

           #if JUCE_MAC
            [[webView mainFrame] loadRequest: r];
           #else
            [webView loadRequest: r];
           #endif
        }
        [webView setScalesPageToFit:YES]; // <- Add this line!!!
    }

Can you try if this works for you? If yes, we will add a way to enbale this flag in JUCE. Thanks!

8

Fabian, 

Hey, first of all, big apologies from me for never responding to this. For some reason I do not get email notifications when someone replies to me on the JUCE forum. So, I had no idea that you had replied.

 

However, I stumbled across your reply today and added the line you suggest above. And, indeed, this solves the problem.

 

So, definitely proceed with enabling the flag.

 

Thanks a bunch!

-Gerald Hinson - RighteousTales founder / janitor

9

OK. I've pushed these changes to master. Thanks for the feedback!

10

Happy to help.

So, is this now exposed via a flag (per your earlier email) or did you just add the line as shown?

When will the change(s) show up in a downloadable distribution?

 

Thanks!

-Gerald

11

Rail

12

It's only enabled on iOS to match the default behaviour of Safari on iOS.