получать контент для приятной игры на iOS - PullRequest
Новая
       63

получать контент для приятной игры на iOS

1 голос
/ 09 июня 2011

Мой сайт - это маленькая коробка размером 540x500 пикселей по центру страницы. iPhone и Blackberry обрезают верхнюю часть контента. У меня это абсолютно по центру на странице. Я возился с настройками окна просмотра мета в надежде, что с полями страницы справились другие устройства, и мне повезло, но когда дело доходит до этого, я не могу найти решение, объединяющее обе мои строки кода.

Мой код приведен ниже. Я изучил медиазапросы, установил мета на ширину устройства (обрезает поля) и множество других опций. честно говоря, я знаю, что я разборчив, и я потратил на это немало времени.

Мне нужна помощь!

Во-первых, HTML 

<div id="container">content</div>

CSS 

#container {
    width:540px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -270px;
    position:absolute;
}

Мета-настройки 

<!--<meta name="viewport" content="width=device-width, initial-scale=1">
    cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
    works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
    works for iPad-->

Ответы [ 2 ]

1 голос
/ 10 июня 2011

Apple рекомендует, чтобы любая страница размером менее 980 пикселей была объявлена ​​по ширине в настройках вашего окна просмотра.http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

Использовал медиазапрос, чтобы настроить мои отрицательные поля для мобильного использования.Максимальное разрешение 1024 пикселей на iPad ..., которое охватывает большинство планшетов.

HTML-заголовок 

<meta name="viewport" content="width=500">

CSS-заголовок 

  @media only screen 
  and (max-device-width:1024px) {
    #container {
      width:500px;
      height:500px;
      top:0;
      left:0;
      margin:0 auto;
      position:static;
    }
  }
0 голосов
/ 10 июня 2011

Похоже, что ваше отрицательное верхнее поле обрезает контент.

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

Если это единственный div на странице, используйте мобильную таблицу стилей, чтобы убрать позиционирование, оставив только width, height и некоторые меньшие, более простые margins.

Затем используйте что-то вроде <meta name="viewport" content="width=580">, устанавливая только width.

Это работало для меня в прошлом.

...