manpages.ubuntu.com has broken layout when browsing with iPhone browser

[Tomas Cassidy]

When browsing the manpage for jp2a on the iPhone web browser, the page layout is broken. Screenshots are attached which show the broken layout.

[Joseph Judistira (jjdstr)]

This should affect all common browsers. It happens whenever the headers in the floating TOC are wide enough to overflow on top of the main text (because the screen is just too narrow).

[Dustin Kirkland  (kirkland)]

Okay, I think I can add some logic that would only allow the ToC to display if the windows width is greater than, say 640 pixels.

[Dustin Kirkland  (kirkland)]

Fix committed.

ToC will only display if browser width is >= 790 pixels.

[Dustin Kirkland  (kirkland)]

Committed revision 167.

[Tomas Cassidy (tomas-cassidy)]

I can still see the problem occurring when browsing the manpage for jp2a on the iPhone web browser.

[Dustin Kirkland  (kirkland)]

What's the resolution of the iphone browser?

I added some javascript that should only display the table of contents
if the browser is wider than 790 pixels.

Can you tell me if this javascript works correctly in the iPhone browser:

function getWidth() {
        width = 0;
        if (parseInt(navigator.appVersion)>3) {
                if (navigator.appName=="Netscape") {
                        width = window.innerWidth;
                } else if (navigator.appName.indexOf("Microsoft")!=-1) {
                        width = document.body.offsetWidth;
                }
        }
        return width;
}

[Tomas Cassidy (tomas-cassidy)]

Running that code in the iphone browser in portrait mode it returns "320". In landscape mode it returns "981". Running the code in Opera 10.52 on the desktop (WinXP) it returns "0". The iphone can possibly be fixed by setting some "viewport" meta-tag settings, but would have to be tested directly against an iphone to ensure compatibility.

[Tomas Cassidy (tomas-cassidy)]

You can also use conditional CSS to target the iPhone/iPod Touch browsers directly:

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html