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

Ответ 1

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

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

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

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

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

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

< процент >
Определяет процентную ширину. Процент вычисляется по ширине сгенерированного блока, содержащего блок. Если ширина блокирующего блока зависит от этой ширины элемента, тогда результирующий макет undefined в 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...

Ответ 2

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

Mike

Ответ 3

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

body, p { width: 100%; }

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

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

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

 background: url('');

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

Ответ 4

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

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

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

Ответ 5

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

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

Надеюсь, я был полезен.

Ответ 6

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

В моем случае я решил с видовым окном и некоторым 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);
}

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

Ответ 7

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

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

Ответ 8

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

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

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