h2 текст и bg цвет, текущий при масштабировании; на Android / Android Emulator 2.2,2.3.3, используя jQuery Mobile - PullRequest
Новая
       29

h2 текст и bg цвет, текущий при масштабировании; на Android / Android Emulator 2.2,2.3.3, используя jQuery Mobile

1 голос
/ 27 марта 2012

В этом примере я использую Android Emulator SDK версии 2.2 с разрешением экрана 480x854. Страница также использует jQuery Mobile.

Теперь, в качестве примера, у меня есть цвет фона, примененный к элементу h2. Когда я увеличиваю, ширина цвета фона уменьшается. Я применил ширину к разделу data-role = "page". Вы могли бы подумать, что ширина будет течь вниз к другим элементам внутри этого div, но это не так. Я видел это только в Android Emulator SDK 2.2 и 2.3.3. IPhone не страдает от этого, и я не видел этого ни в 4.x, 1.x или 2.1 SDK эмулятора Android.

Когда я увеличиваю изображение, я ожидаю фиксированной ширины. Я не хочу, чтобы h2 или какой-либо элемент внутри div data-role = "page" перемещался для заполнения страницы. Я попытался установить ширину h2 в стиле, но это не помогло. Как я уже сказал, это, кажется, происходит только на 2.2 и 2.3.3. Обратите внимание, как течет не только фон элемента h2, но и текст! Я изо всех сил пытаюсь найти способ запретить поток текста.

Как я могу решить это?

Спасибо.

FYI -

Вот тег meta name = "viewport": 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">

Вот CSS для тега h2 и data-role = "page" div: 

#Index {
  width:320px;
}

h2 {
  background: silver bottom left repeat-x;
  color:#333;
  font-weight:bold;
  line-height:1em;
  clear:both;
  border-width:2px;
  /*width:320px;*/ /* Does not work */
}

Вот HTML-код внутри тега body: 

<div data-role="page" id="Index">
  <div id="header">
    <h1>Title</h1>
  </div>

  <a href="JavaScript:history.back();" data-direction="reverse" data-role="button" data-icon="arrow-l" data-inline="true" class="BackBtn">Back</a>
  <a href="#Index" data-direction="reverse" data-role="button" data-icon="home" data-inline="true" class="IndexBtn">Home</a>

  <h2>Section</h2>

</div>

Вот скриншот, уменьшенный:

No Zoom

Вот скриншот, увеличенный:

Zoomed

1 Ответ

0 голосов
/ 29 марта 2012

Я провел дополнительное тестирование и обнаружил кое-что довольно интересное ...

Я добавил встроенный блок и фиксированную ширину к стилю h2 и расширил его, добавив теги h1-h6, p и div (два вышеупомянутых свойства CSS устранили проблему с цветом фона). Я отобразил каждый в HTML с тем же набором текста. Я заметил, что текст h3 и h6 не перетекал / не переносился при увеличении страницы. Ключ, кажется, регулирует высоту строки, которая установлена ​​в 1.0em для h3 и h6. Я изменил высоту линии до 0,95em для h2, и она также остается фиксированной при увеличении страницы. Пока что все выглядит хорошо в Android Emulator SDK 2.1, у которого не было этой проблемы. Мне придется проверить его на других версиях и разрешениях экрана, чтобы подтвердить.

Вот CSS: 

h1, h2, h3, h4, h5, h6, p, div {
  background: silver bottom left repeat-x;
  width:320px;
  display:inline-block;
}
h3, h6 {
  line-height:1em;
}
h2 {
  line-height:0.95em;
}

Обновление

Я протестировал его на других версиях и разрешениях Android Emulator SDK, и все выглядит хорошо. Я также установил высоту строки 0,95em для всех элементов блока выше.

Новый CSS (только портрет) 

h1, h2, h3, h4, h5, h6, p, div {
  background: silver bottom left repeat-x;
  width:320px;
  display:inline-block;
  line-height:0.95em;
}
...