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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

• целевые меньшие устройства (поскольку IE8 имеет тенденцию быть рабочим) и
• предназначены только для соответствующих тегов "p" (autofit нацеливается только на некоторые "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" , которые автоматически устанавливаются, естественно, вам нужно будет изменить это. "тело" будет работать, да, но чем конкретнее, тем ниже влияние на время перерисовки.

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

Ответ 3

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

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

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

Я также подтвердил, что поведение является результатом настройки "Автоподбор веб-страниц". Я не владею Android, но испытал эти проблемы с помощью эмулятора.

Еще раз спасибо Delbert за подсказку.

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

введите Width в% вместо px, например width:100%;

Ответ 9

У меня почти такая же проблема с p-тегами, и они намного меньше, чем окружающий контейнер, но только с Android 4.x. С Android 2.3.x и Android 3.x "страницы автоматической установки" не имеет отрицательного побочного эффекта.

Кажется, они пытались что-то улучшить, но раньше это работало, это раздражало.

Ответ 10

Это, по-видимому, проблема программирования с Android. Но в вашем мобильном браузере в разделе Настройки = > Дополнительно снимите флажок Автоподгонки страниц, и это можно решить. Но мы, возможно, не хотим, чтобы наши пользователи соблюдали правила. Таким образом, пока что простой взлом для размещения прозрачного фонового изображения не должен быть исключен как временное решение. Используя Drupal в качестве рамки и Omega в качестве моей отзывчивой темы, и зная, что мои области макета и внешние DIVs установлены на {display: block width: 100%}, это заставило меня гайки в течение нескольких минут. Но прозрачное изображение прекрасно работало.

Ответ 11

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

<!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>

Ответ 12

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

Я решил проблему, вставив прозрачное изображение размером 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 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>

Ответ 13

Добавив фоновое изображение в ваш css, автоподстановка будет отключена.

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

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

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