Iphone и Blackberry - проблемы ширины на мобильном сайте

Question

Я недавно работал над пилотным мобильным сайтом для компании, в которой я работаю. Проведя небольшой альфа-тест, я столкнулся с несколькими проблемами ширины для ежевики и iPhone.

Когда вы заходите на мой мобильный сайт с помощью Blackberry Bold или Iphone, ширина контейнера заканчивается, возможно, на 5-10% от общей ширины просмотра. На кривой ежевики контейнер обрезается примерно на 50-60% от общей ширины, за исключением изображений динамиков на главной странице.

Вот сайт: http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

Первоначально я нашел эту строку кода, чтобы помочь изменить размер на ipad, но мне не повезло с проблемами, связанными с blackberry / iphone.

  <meta name="viewport" content="user-scalable=no, width=device-width" />

Так же, как sidenote, у меня не было проблем с шириной ни на одном устройстве Android.

Пожалуйста, помогите! И дайте мне знать, если я смогу предоставить больше информации!

Answer 1

попробуйте это:

<meta name="viewport" content="width=device-width, maximum-scale=1">

EDIT:

После дальнейшего рассмотрения кажется, что проблема связана со стилем .bottom - он имеет ширину 100%, но отступ составляет 10 пикселей, поэтому он будет на 20 пикселей больше экрана.

Я также заметил, что под вашим контентом на странице есть белая полоса, я полагаю, вы этого не хотите. Это исправлено в стиле .container ниже.

Вот это легко исправить. Просто замените следующие стили:

.bottom {
    background:#2D3192;
    width:100%;
}
.bottom p {
    font-size:.70em;
    color:#FFF;
    font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
    font-weight:400;
    padding: 10px;
}
.container {
    width:100%;
    padding-top: 10px;
    background:url(http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/P1656_mobileBG.jpg) repeat-x #FFF;
    margin:0;
    top:0;
}

Я оставил старые блоки, чтобы вы могли просто поменять их со своими текущими.

О, и вы также можете изменить свою мету обратно на:

 <meta name="viewport" content="user-scalable=no, width=device-width" />

Надеюсь, это поможет!