Mobile web layout inconsistency issue

Question

I've tried configuring the following page so that the width of the page would fit the screen size of the device: http://www.kinohunt.com/movies/17353

The html I used to configure this is the following:

However, this page renders as expected on iPad but not on iPhone When opened in iPhone, the page is always sized too large so it's over the screen width hence the right side is cropped.

Am I not using the viewport configuration correctly?

I also have a similar page with more movie-details object in the dom and it resizes properly on iPhone: http://www.kinohunt.com/top/imdb

Answer 1

You're using hard coded width values. Use percentages instead. For example, width: 80%. That will allow your page elements to scale accordingly.

The iPad was probably viewing fine, because its viewport was larger than your hard-coded width settings (in your case, 780px on "top-table").

Here are the jsfiddle examples (resize the browser in each example):

• This example is utilizing percentages for your width values (notice how the box scales with the browser) http://jsfiddle.net/reala/09kwrmx1/

• This example is utilizing hard-coded width values (like you're using). Notice how the box does not scale with the browser http://jsfiddle.net/reala/6xdxm28t/