<p> стиль неверен, если цвет фона не применяется

Question

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

У меня странные трудности.В контейнере div у меня есть <p>, который должен заполнить ширину div.Я пробовал width:auto, width:100% ... В браузере Android ничего не работает.Вот примеры:

iOS (правильный):

Android (неверный; не полностью распространяется; добавлен дополнительный текстчем версия для iOS, чтобы вы могли видеть, о чем я говорю):

Оба снимка экрана, сделанные из соответствующих эмуляторов.

Вот странныйно ... Если я дам класс, примененный к этим <p> цветам фона, браузер Android тогда позволит <p> заполнить всю ширину его родительского div (выглядит идентично iOS).Тем не менее, действительно странная часть заключается в том, что если я сделаю фоновый цвет прозрачным (я думал, что его обманули, лол), то он возвращается к тому, как показано в примере.

Итак, у меня есть <p> только правильно ссылается на свой CSS, если к нему применен цвет фона ... Я что-то тупо пропускаю или это какая-то проблема с браузером Android?Любые идеи, как это исправить?

Спасибо за ваше время.

Answer 1

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

Answer 2

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

Им можно управлять на вашем телефоне, возможно, в настройках браузера, но это не то решение, которое вам нужно.

Это можно исправить с помощью обходного пути применения фонового изображения к нужному элементу.

Это можно сделать с помощью URL-адреса, закодированного в base64:

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

Answer 3

В настройках вашего мобильного браузера найдите что-то под названием «Автоподгонка страниц» и отключите его.Этот параметр (в Android) включен по умолчанию.Выключите его, и ваш текст будет течь, как и должно.

Answer 4

div или любой элемент выше этого

может быть проблемой.

Если вы назначите фиксированную ширину элементу p, он будет работать хорошо?