Режим автозапуска Android вызывает проблемы с шириной CSS на веб-странице

Question

У меня проблемы с функцией автоматического изменения размера браузера Android.Ширина моего сайта немного увеличивается, когда устройство находится в портретном режиме.

Я хотел бы сделать следующее:

• иметь одинаковую версию сайта для обоих компьютерови мобильных пользователей.
• Позволяет пользователю увеличивать и уменьшать масштаб по своему усмотрению.

В настоящее время у меня в голове есть следующее

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

Я нашел следующее сообщение в блоге, в котором описана моя проблема.

Это определенно вызвано макетом с автоподгонкой ("kLayoutFitColumnToScreen" в исходном коде Android WebKit).Просто попробуйте выполнить тест с отключенной автоматической подгонкой, и все будет отображаться правильно (по крайней мере, на моем устройстве Android).

Режим автоматической подгонки в Android, похоже, уменьшает ширину определенных элементов, не влияя на их расположение, илипозиционирование других элементов.Поэтому, если у вас есть содержащий блок с шириной: 1000 пикселей и текст, который охватывает 100% этой ширины, контейнер может оставаться шириной 1000 пикселей, но текст внутри него будет перенесен на ширину экрана.

http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html

Есть ли способ, чтобы остановить этот режим автоподбора?Я не хочу отключать масштабирование.

Обновление:

Я все еще ищу решение, если кто-нибудь знает его.

Нашликто-то с той же проблемой (хотя они используют таблицы)

Свертывание столбцов Spanned в веб-браузере Android (при использовании страниц с автоподгонкой)

http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

Answer 1

Просто приведу приведенные выше ответы, которые сработали для меня, с одной важной оговоркой: время перерисовки в IE8 делает метод прозрачного пикселя 1x1 непригодным для этой цели на холсте приличного размера.

Поскольку CSS не может определить авто-подгонку или браузеры Android (Chrome на Android все равно выглядит нормально), мой обходной путь был

1. нацелены на устройства меньшего размера (поскольку IE8 обычно является настольным), а
2. предназначается только для релевантных тегов 'p' (автозаполнение предназначается только для некоторых тегов 'p'), поэтому, если мы применяем это исправление только там, где это необходимо, мы сохраняем влияние на производительность перерисовки как можно ниже.

Мой обходной путь (основываясь на ответе Деметика выше):

/* work around mobile device auto-fitting */
@media only screen and (max-device-width: 800px) {
   #content p {
       background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==); 
       background-repeat:repeat;
    }
}

На моем сайте '#content' находятся теги 'p', которые устанавливаются автоматически, естественно вам нужно это изменить. «body» будет работать, да, но чем конкретнее, тем меньше влияние на время перерисовки.

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

Answer 2

Я столкнулся с этой проблемой и нашел решение, которое работает для меня.

У меня есть один главный <div> с несколькими вложенными <div> элементами внутри. HTML очень простой. Я обнаружил, что один <div> в моем основном <div> обернет его текст, как если бы я дважды коснулся текста, чтобы увеличить его. Это <div> содержит только текст. Такое поведение происходило только в портретной ориентации и исправлялось после двойного касания или переключения ориентации.

Поскольку эта проблема является ошибкой Android, ни один CSS или HTML не может ее исправить. Тем не менее, следующий CSS решил проблему удовлетворительно для меня; и мне не нужно было отключать «Подгонка страниц»:

Я добавил CSS background-image в <div>. Я просто использовал прозрачный однопиксельный PNG в качестве фона.

div { background-image: url(../img/blank.png); }

Answer 3

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

Для этого я попробовал несколько довольно агрессивных попыток исправить ширину некоторых тегов <p>, глубоко вложенных в цепочку тегов <div>, используя некоторые из предложенных здесь решений:

* { background-color: transparent; } не работает для меня. Однако * { background-image: url("/image/pixel.png"); DID работает для меня (где pixel.png - прозрачный PNG 1x1). В конце концов я ослабил это, чтобы применить только к моим вложенным тегам <p>, и обнаружил, что мои абзацы наконец-то охватывают предполагаемую правильную ширину.

Я также подтвердил, что поведение является результатом настройки «Автоподгонка веб-страниц». У меня нет Android, но я столкнулся с этими проблемами при использовании эмулятора.

Еще раз спасибо Дельберту за подсказку.

Answer 4

Та же проблема здесь. Содержимое в моих тегах <p> скрыто слева. Хорошего решения пока не найдено, хотя я обнаружил, что если я добавлю цвет фона к своему тегу <p>, это "исправит" проблему. Я все еще пытаюсь найти реальное решение, поскольку добавление цвета фона не является идеальным.

Answer 5

*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}

Answer 6

Я просто добавляю прозрачное изображение PNG в качестве повторяющегося фона.Это также работает для тегов H1, H2, H3 ..., которые, похоже, страдают от той же проблемы узких столбцов.Используя прозрачный png, он позволяет мне назначать цвет фона или показывать то, что находится за элементом.Это не идеально, но я обнаружил, что это самое простое решение, которое не зависит от какого-либо взлома для конкретного браузера и, кажется, хорошо работает во всех других мобильных браузерах, которые я видел.

Хотя я заметил, чтотакое же поведение и для тегов SPAN, и вышеприведенное, похоже, не работает для этого элемента ... странно!

Answer 7

Да, похоже, что Android 4.x в деле. Действительно раздражает, потому что это поведение по умолчанию! Это полностью уничтожить все мои сайты ...

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

Answer 8

При добавлении фонового изображения в ваш CSS автоматическая подгонка будет отключена.

Другие авторы предложили добавить прозрачный фон размером в один пиксель, но вы можете просто добавить пустое фоновое изображение в верхнюю частьсвою таблицу стилей CSS и пропустите дополнительный http-запрос и перерисовку.

 div, p { 
 background-image: url();
 }

Я проверил его в своем эмуляторе и в Galaxy SII, и похоже, что он работает так же, как добавление фактического URL.

Answer 9

Одно можно сказать наверняка, функция «автоподгонки» вызывает много седых у разработчиков.

Я решил проблему, вставив прозрачное изображение, высотой 1 пиксель и шириной 650 пикселов (ширина моей электронной почты) в самом верху моей электронной почты.

Даже при включенной автоматической подгонке мое письмо теперь отображается так, как и должно быть.

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">

      <!-- HERE'S THE MAGIC -->    
      <table width="650" border="0" cellpadding="0" cellspacing="0">  
        <tr>
          <td height="1">
            <img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
          </td>
        </tr>
      </table>
      <!-- END THE MAGIC -->

      <!-- Start Wrapper-->
      <table width="650" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td >
            REST OF EMAIL HERE
          </td>
        </tr>
      </table>
      <!-- End Wrapper-->
    </td>
  </td>
</table>

Answer 10

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Gmail Issue</title>
  </head>
  <body>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="50%" valign="top"></td>
        <td width="1100" valign="top" style="min-width:1100px;"></td>
        <td width="50%" valign="top"></td>
      </tr>
    </table>
  </body>
</html>