I’ve got the same issue with my Corona page left-aligning and leaving a big gap of background on the right, but the spacing to the right is about 40-45 pixels, not as dramatic as mgason’s image, but still unsightly. I’d prefer the site to fill the screen horizontally, but alternatively if the page was simply centered with background to either side, that would be passable.

I took a look with an iPad at several other WordPress sites featured on the WordPress homepage, and they don’t have the problem. A few were centered, with 5-8 pixels on either side. Most filled the screen.

Curiously, the homepage of ThemeForest has a left-alignment issue on the iPad, too, with a gap of about 12 pixels to the right. The Corona demo page does not have an issue (whether fullscreen or set to Boxed style like my page).

Could this be a !DOCTYPE issue? This w3 page shows that unless a !DOCTYPE is fully specified, some browsers won’t get the .container tag right. For example, IE8 will add 17 pixels to the right for a scrollbar. See http://www.w3schools.com/css/css_align.asp

I rechecked the ThemeForest homepage, and that’s a different issue (page elements formatting incorrectly). My hunch is that it is an improper DOCTYPE! tag… Corona comes with a header.php file which doesn’t properly specify. (It is <!DOCTYPE html> presently). So I will try to fix later today on my end and see if there’s any result. Please bring this to Kriesi’s attention, as all pages should correctly identify version of HTML or XHTML, etc., and perhaps this could be part of any new update to templates…

Ok so I did not understand that the DOCTYPE tag was in fact correct to begin with; Kriesi is using HTML5 and CSS3… so please disregard my earlier explorations for a solution.

What I did experiment with today was adding:

<meta name = “viewport” content = “initial-scale = 1.0″>

to the header.php file. This will render my pages correctly ONCE, when loaded in landscape mode on iPad, without errors. The page actually shows up like most other WordPress Blogs. 1:1, centered, with a bit of border to right and left. Very nice.

However, it will also prevent the iPad from rotating properly to portrait mode. The pages will not resize properly. So it is not a fix, but perhaps a key to a solution.

The viewport meta tag can alternately be added to functions.php . I also played with this:

//////////////////////////////////////////////

/// Add the /viewport meta to the header

/////////////////////////////////////////////

add_action(‘wp_head’, ‘add_viewport_meta’);

function add_viewport_meta() {

echo “n” . ‘<meta name=”viewport” content=”width=1100″ />’ . “n”;

}

Which is essentially the same thing as adding <meta name = “viewport” content = “width = 1100″> to the header.php file.

When the width is set to 1100 pixels (using a viewport meta tag with either method–in header.php or functions.php), there is a then a large margin to the right and to the left, AND the iPad correctly maintains two margins when rotating. But again, it is not desirable to have these margins, especially in landscape mode… resolution of the site is lost, and the main page width clearly adheres to a resolution which should be optimal in iPad landscape. Values lower than 1100pixels leave a larger margin to the right than to the left.

Something within the formatting of the page is clearly causing the iPad to incorrectly size the viewport to accommodate a page which it thinks is larger than 1000 pixels (does it think something extends out to the right–an overflow? I don’t know. I suspect that’s the case for initial poster’s site and mine too).

SO: Setting viewport to 1100 pixels will provide a temporary fix, but a sub-optimal viewing experience. The CSS is fairly complex, so Kriesi & Dude: I hope you can determine which page elements are causing the iPad to think the site is larger than 1050 pixels wide?

I first removed header and footer first to see if something there was creating overflow into the margin (created backup files of header.php and footer.php, then erased non-critical content). That had no effect.

Then I restored header and footer and created a blank page with header and footer in place and that had no effect.

As it turned out, I had one too many menu items plus a custom logo, which evidently caused overflow into margin within the menu. (in my case it was the Descriptions used under the menu items.)

It appears the descriptors underneath the menu items were causing the problem… they were all on the page, looking nice, but must have messed with iPad’s interpretation of the floats or something like that. So they were right up against the page limit size.

So I think if you eliminate things like I did by process of elimination, you will find there’s some content which overflows on your site… this can probably be addressed by modifying your stylesheet in a child theme or within the Admin panel… maybe Chris, Dude or Kriesi have other suggestions… hope that helps!

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Site does not fill screen on ipad’ is closed to new replies.