#android #css #android-emulator #android-browser
#Android #css #android-эмулятор #android-браузер
Вопрос:
Я разрабатываю мобильный сайт, поэтому я использую CSS, чтобы сделать все как можно более гибким.
У меня возникла странная трудность. Внутри контейнера div у меня есть <p> , который должен заполнять ширину div. Я пробовал width:auto , width:100% … кажется, ничего не работает в браузере Android. Вот примеры:
iOS (правильно):
Android (Неверно; не полностью распространяется; добавлено больше текста, чем в версии для iOS, чтобы вы могли видеть, о чем я говорю):
Оба скриншота взяты из соответствующих эмуляторов.
Однако вот что странно… Если я присвою классу, применяемому к этим <p> , цвет фона, браузер Android затем позволяет <p> заполнить всю ширину своего родительского div (выглядит идентично iOS). Однако действительно странная часть заключается в том, что если я сделаю цвет фона прозрачным (я думал, что меня обманули, lol), то все вернется к тому, как показано в примере.
Итак, у меня есть <p> правильная ссылка на его CSS только в том случае, если к нему применен цвет фона… я что-то тупо упускаю из виду, или это какая-то проблема с браузером Android? Есть идеи, как это исправить?
Спасибо за ваше время.
Комментарии:
1. Не используйте <p> для этого, используйте <span> вместо этого < div>. <p> предназначен для абзацев, а встроенный браузер Android использует ширину абзацев для удобства чтения.
Ответ №1:
Хотя это может быть не лучшим решением, я, наконец, просто создал «невидимый» прозрачный png-файл и установил его в качестве <p> фона, и это устранило проблему… если это можно назвать исправлением. 🙂 Я должен предположить, что это какая-то ошибка в браузере Android, поскольку я пробовал это в каждом браузере, настольном и мобильном.
Комментарии:
1. После некоторых исследований и тестирования я также обнаружил, что это решение является лучшим «исправлением» на данный момент, каким бы уродливым оно ни было.
2. Я также обыскал Интернет по всей сети и не нашел другого надежного решения, которое не требовало бы слишком большого количества кодирования. Это, кажется, наименее хрупкое решение, так что спасибо!
Ответ №2:
Это предполагаемое поведение телефонов Android. Это улучшит читаемость копируемого текста, поскольку вам не придется прокручивать страницу вбок, если вы увеличите масштаб страницы.
Этим можно управлять на вашем собственном телефоне, возможно, в настройках браузера, но это не то решение, которое вам нужно.
Это может быть «исправлено» обходным путем применения фонового изображения к нужному элементу.
Это можно сделать с помощью URL-адреса данных в кодировке base64:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
Ответ №3:
В настройках вашего мобильного браузера найдите что-то под названием «Автоматическая подгонка страниц» и отключите его. Этот параметр (в Android) включен по умолчанию. Отключите его, и ваш текст будет выглядеть так, как должен.
Комментарии:
1. Я не думаю, что просить каждого посетителя сайта настроить настройки своего браузера — это приемлемое решение.
Ответ №4:
div или любой элемент над этим
может быть проблема.
если вы задаете фиксированную ширину элементу p, хорошо ли это работает?
Комментарии:
1. Мне нужно, чтобы макет был жидким, поэтому я не могу работать с фиксированной шириной.