Мобильный веб-макет несогласованность вопрос

Question

Я попытался настройки на следующей странице, так что ширина страницы будет соответствовать размеру экрана устройства: http://www.kinohunt.com/movies/17353

HTML, я использовал, чтобы настроить это следующим образом:

Тем не менее, эта страница выглядит так, как ожидалось, на iPad, но не на iPhone. . Когда она открыта в iPhone, страница всегда имеет размер слишком большой, поэтому она находится по ширине экрана, поэтому правая сторона обрезана.

Правильно ли я использую конфигурацию видового экрана?

У меня также есть подобная страница с большим количеством фильмов-деталью объектом в DOM и изменяет должным образом на iPhone: http://www.kinohunt.com/top/imdb

Answer 1

Вы используете жестко закодированные значения ширины. Вместо этого используйте проценты. Например, width: 80%. Это позволит соответствующим образом масштабировать элементы страницы.

iPad, вероятно, отлично смотрелся, потому что его окно просмотра было больше, чем ваши жестко заданные настройки ширины (в вашем случае 780px на «верхнем столе»).

Вот jsfiddle примеры (изменять размер браузера в каждом примере):

• Этот пример использует проценты для значений ширины (обратите внимание, как коробка весы с браузером) http://jsfiddle.net/reala/09kwrmx1/

• В этом примере используются жестко закодированные значения ширины (например, вы используете). Обратите внимание, как поле не масштабируется с помощью браузера http://jsfiddle.net/reala/6xdxm28t/