Почему браузер Android не охватывает этот абзац по всей ширине браузера? - PullRequest
Новая
       8

Почему браузер Android не охватывает этот абзац по всей ширине браузера?

29 голосов
/ 23 февраля 2012

Проблема:

enter image description here

Вопрос

Абзац заполнит всю ширину страницы в

  • Firefox
  • Firefox Mobile (протестировано с 4.0.3 на SGS2)
  • Chrome
  • Chrome Mobile Beta (протестировано с 4.0.3 на SGS2)
  • Internet Explorer
  • Internet Explorer Mobile (тестирование с эмулятором Windows Phone)
  • Opera Mobile (протестировано с 4.0.3 на SGS2)
  • Собственный браузер Android (протестирован с 4.0.3 на SGS2 и эмуляторе Android)

Что мне делать, чтобы он делал то же самое в браузере Android по умолчанию?

Я пытался:

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

width

Увеличение значения свойства width в классе p CSS не имеет никакого эффекта.
Относительные значения: 100% и 1000% не имеют никакого эффекта. Значения <100% имеют эффект (абзац становится тоньше). <br> Абсолютные значения: 1000px не расширяет ширину, хотя низкие значения уменьшают ее.

float

При установке float : right; в абзаце он будет отображаться по желанию:
enter image description here

CSS Reset

Когда я вставляю эти CSS Reset стили, ширина абзаца не изменяется.

position

При установке position на absolute в абзаце, он будет отображаться по желанию. Но я не уверен, что это вообще можно было бы включить.

Источник: 

<!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>
    <title>Android Browser Issue</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      body {
        border : 3px dotted green;
        margin : 0;
        padding: 0;
      }
      p {
        border : 3px solid red;
        margin : 0;
        padding: 0; 
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>

Вы можете увидеть это здесь: http://jsfiddle.net/EYcWL/embedded/result/ или перейти туда напрямую: enter image description here

Ответы [ 8 ]

12 голосов
/ 19 июня 2012

Я нашел решение этой проблемы, которое действительно работает !!Это на самом деле параметр в браузере Android "Auto-Fit Pages".Отключение этой опции решит эту проблему с уверенностью.

Mike

9 голосов
/ 05 марта 2012

Это не ошибка, вам не нужно исправление в ECMAScript для решения этой проблемы.

Вы должны подумать о дереве, в котором находится ваш контент. 

window
 \- html
   \- body
     \- p
       \- content

Итак, ширина вашего контента определяется атрибутами CSS элемента p. Итак, поскольку вы хотите, чтобы текст был такой же ширины, как окно вашего браузера, мы можем попытаться установить его ширину на 100%; таким образом: 

p { width: 100%; display: block; margin: 0px; padding: 0px; }

Однако вы почувствуете, что это не работает, как вы думали. Это, однако, не ошибка, а просто неправильное понимание стандарта. Давайте не будем смотреть на то, что стандарт говорит нам об установке процентной ширины для элемента, см. Свойство width в деталях модели визуального форматирования :


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

Подчеркните, этот текст говорит, что он рассчитывается относительно ширины содержащего блока. Оглядываясь назад на наше дерево, p содержится в body. Итак, какова ширина нашего содержащего блока?

Мы еще не определили эту ширину, поэтому она принимает определенное браузером значение.

Решением здесь также является определение ширины тела, что означает добавление 6 символов: 

html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }

Итак, теперь ширина вашего html равна 100% ширины вашего окна, ширина body равна 100% вашего html, а ширина вашего p равна 100% вашего body. это должно получить всю ширину правильно.

Суть в том, чтобы подумать о вашем дереве DOM и проверить стандарт CSS ...

6 голосов
/ 16 декабря 2012

После решения этой проблемы Объединение метапортпорта и медиазапросов обеспечило самое простое решение. Просто добавив <meta name="viewport" content="width=device-width" /> к исходному HTML, указанному в вопросе , исправлено отображение в браузере Android (с использованием виртуального устройства Android 4.2). Цитируем приведенную ссылку:

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

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

6 голосов
/ 14 апреля 2012

Это не проблема CSS, 

body, p { width: 100%; }

Кажется, не работает, см. этот скриншот .

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

Это похоже на взлом, но я не могу найти другое решение. 

 background: url('');

Не уверен, что в некоторых браузерах будет отображаться значок отсутствующего изображения x,
В качестве альтернативы вы можете использовать пустой PNG.

3 голосов
/ 28 февраля 2012

Это ошибка;Вы должны заставить декларацию высоты получить желаемый эффект;Я сделал это скрипка .

Итак, я предлагаю вам использовать метод .height () в jQuery или другой среде js для вычисления реальной высоты <p> и добавления встроенного стиля на лету.Это довольно ненавязчиво.

Надеюсь, я помог.

1 голос
/ 16 июля 2013

Для android и маленьких экранов в навигаторе по умолчанию, абзац принимается как ширина устройства как p-> max-width.

В моем случае я решил с помощью viewport и некоторого JavaScript: 

//NOTE: Take android boolean var from user-agent in request
var screenWidth=window.screen.width;
if (screenWidth<600 && android) {
    var node = document.createElement('meta');
    node.name="viewport";
    node.content="initial-scale=0.1, maximum-scale=3";
    $("head").append(node);
}

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

0 голосов
/ 26 июля 2012

Другой простой способ исправить эту ошибку: 

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

blank.png - прозрачное изображение размером 1x1px.

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

Я не думаю, что это ошибка: мой Android 4 меняет ширину p, если я перехожу из портретной в альбомную ориентацию, и если я дважды щелкаю для увеличения, он точно соответствует экрану.

Имейте в виду, что область просмотра для мобильных телефонов часто показывает ширину примерно 1000 пикселей (может быть 1024), в то время как экран меньше; когда вы говорите 100%, браузер может использовать ширину экрана, а не ширину области просмотра. Это позволяет кликнуть на тексте, автоматически поместив абзац на экран без переформатирования. Вероятно, это поведение ограничено тегом P, и это может считаться соответствующим семантике p.

...