Как установить правильную ширину для мобильной веб-страницы на iphone - PullRequest
3 голосов
/ 04 февраля 2011

Я пытаюсь настроить свои мобильные веб-страницы для iphone, но он не показывает правильную ширину.

Проблема заключается в том, что в большинстве постов моей страницы есть картинки шириной от 480 до 500 пикселей.поэтому, если я настрою meta следующим образом:

1 = это покажет все части картинок в сообщении , но экран страницы будет больше, чем экран iphone ..

name = "viewport" content = "width = 480px; начальный масштаб = 1; максимальный масштаб = 1; масштабируемый пользователем = 1;"

2= это покажет страницы правильно с внутренним экраном iphone. , но правая часть изображений будет скрыта за пределами ширины экрана в режиме подставки .

name = "viewport"content = "ширина = ширина устройства; начальный масштаб = 1; максимальный масштаб = 1; масштабируемый пользователем = 1;"

Пожалуйста, помогите настроить отображение полных изображений в iphone и на веб-страницеувеличить правильную ширину экрана.

тестовое использование iphone по адресу: http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186

1 Ответ

5 голосов
/ 04 февраля 2011

Возможно, вы захотите попробовать что-то вроде этого:

Допустим, ваш HTML выглядит так:

<body>
  <div id="wrapper">
    <img src="small-image.jpg" />
  </div>
</body>

Вы можете сделать это с помощью CSS:

/* you can modify this as you see fit */
@media screen and (max-width: 480px) {

  div#wrapper {
    max-width: 100%;
    overflow:hidden;
  }
  img {
    max-width: 100%;
  }

}

Примечание. Это будет работать только в том случае, если вы установите ширину для элемента обтекания, как мы делаем там. max-width также подходит для этого. Если вы этого не сделаете, элемент, вероятно, растянется вместе с изображением.

Это гарантирует, что большие изображения никогда не станут больше, чем элемент, который их окружает, но меньшие изображения не будут изменены.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...