为什么 Android 浏览器不会跨越整个浏览器宽度？答案

【问题标题】：Why won't the Android browser span this paragraph over the full browser width?为什么 Android 浏览器不会跨越整个浏览器宽度？
【发布时间】：2015-06-28 08:18:19
【问题描述】：

问题：

问题

段落将填满整个页面的宽度

火狐
Firefox Mobile（在 SGS2 上使用 4.0.3 测试）
铬
Chrome Mobile Beta（在 SGS2 上使用 4.0.3 测试）
Internet Explorer
Internet Explorer Mobile（使用 Windows Phone 模拟器测试）
Opera Mobile（在 SGS2 上使用 4.0.3 测试）
Android 原生浏览器（在 SGS2 和 Android 模拟器上使用 4.0.3 测试）

我该怎么做才能在默认的 Android 浏览器中做同样的事情？

我试过了：

请注意，此示例已简化以显示我在更大页面上遇到的问题。因此，我希望解决方案的破坏性尽可能小。例如，将我网站上的所有段落设置为浮动似乎是个坏主意。

`width`

增加p CSS 类上width 属性的值无效。
相对值：100% 和 1000% 无效。绝对值：1000px 不会扩大宽度，但较低的值会缩小它。

`float`

在段落上设置float : right;时，会根据需要显示：

CSS 重置

当我插入这些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/ 或者直接去那里：

【问题讨论】：

我的安卓（2.3.5）上不存在这个问题（即页面显示OK）。这可能是现在已修复的间歇性错误吗？
在我的 Android 4 浏览器上仍然发生。但我想，无论如何，这并不是一个真正的错误。

标签： android html css android-4.0-ice-cream-sandwich

【解决方案1】：

我找到了一个真正有效的解决方案！！这实际上是android浏览器“Auto-Fit Pages”中的一个设置。关闭它肯定会解决这个问题。

迈克

【讨论】：

这很有意义，很好的发现！ +1
“请关闭自动调整页面以便正确使用本网站”。哈！
我尝试了 android 4.1 - 4.3 的股票浏览器，这就是解决方案。我希望提出这个问题的人可以接受这个答案:)

【解决方案2】：

这不是错误，您不需要在 ECMAScript 中进行修复即可解决此问题。

您必须考虑内容所在的树。

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

因此，您的内容的宽度由 p 元素上的 CSS 属性决定。因此，由于您希望文本与浏览器窗口一样宽，我们可以尝试将其宽度设置为 100%；因此：

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

但是，您会发现这并不像您想象的那样工作。然而，这不是一个错误，而只是对标准的误解。让我们看看标准必须告诉我们关于在元素上设置百分比宽度的内容，请参阅width property in the visual formatting model details：

指定百分比宽度。百分比是根据生成框的包含块的宽度计算的。如果包含块的宽度取决于该元素的宽度，则结果布局在 CSS 2.1 中未定义。

强调我的，这段文字说它是根据包含块的宽度计算的。回顾我们的树，p 包含在 body 中。那么，我们的包含块的宽度是多少？

我们还没有定义那个宽度，所以它是由浏览器决定的。

这里的解决方案是同时定义正文的宽度，即添加 6 个字符：

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

所以，现在html 的宽度是窗口宽度的 100%，body 的宽度是 html 的 100%，p 的宽度是 @987654334 的 100% @。这应该得到所有宽度的权利。

最重要的是考虑您的 DOM 树并检查 CSS 标准...

【讨论】：

似乎没有为我解决问题？ dl.dropbox.com/u/6562060/…
@Anti-Girl：您的<p> 似乎是这种情况下的问题，而其他两个工作正常。试试min-width: 100% 和display: block 之类的东西，让它理解width: 100%。它适用于奥利弗。
@Anti-Girl：他接受了我的回答，并在聊天中告诉我它有效。我现在正在调查你的案子……
哦，好的，谢谢-我以为他对详细的回复感到不知所措:)
Tthe answer 实际上不起作用.. 如果您输入他的更改，页面仍然不会在 Android 4 的整个屏幕上显示文本（只需使用上面的代码制作一个网页，您不需要测试你自己的）...我还没有找到解决方案，但是当你发现接受的解决方案不起作用时，其他人看起来并没有太多的头绪

【解决方案3】：

这不是 CSS 问题，

body, p { width: 100%; }

似乎不起作用，请参阅this screenshot。

但是，如果您为段落应用背景，它会完全跨越。

这似乎是一个 hack，但我找不到任何其他解决方案。

 background: url('');

不确定这是否会在某些浏览器上显示丢失的图像 x 图标，
或者你可以使用一个空的 png。

【讨论】：

margin 和 padding 强制 p 成为块元素，这就是为什么我建议 display: block 作为您的问题的解决方案，不要使用诸如设置背景之类的肮脏技巧...
确保也包含html，并且您的style 标记缺少属性。我们实际上首先在聊天中解决了这个问题，然后我在这里发布了解决方案，所以请原谅我的不完整。实际上，与过去相比，现在的 Android 浏览器错误似乎有所不同。无论如何，要完全修复此设置，也需要一个高度。如果你还有这个问题，please ask a new question.
感谢您的跟进，height 确实可以解决它，但前提是它是一个特定的像素值，因此很遗憾它不是正确的解决方案！感谢您的帮助
@Anti-Gil：嗯，这实际上是有道理的：为了让元素具有一定的宽度，它需要一个可以在其周围流动的元素，body 对此无效重要的是，请尝试将其包装在 div 中。如果你没有在它周围指定一个元素，你需要你的元素充当block，但要成为block，你不仅需要width，还需要height。因此，这可以通过将其包围在 div 中来解决。
不，也不行；除非您指定高度，否则浏览器似乎不支持全宽段落。那时它还在工作，但现在似乎又坏了。 然而，背景似乎引入了某种重新计算；想知道它重新计算的什么，但在尝试时似乎不是 block。 有趣...

【解决方案4】：

遇到这个问题后，Combining meta viewport and media queries 提供了最简单的解决方案。只需将<meta name="viewport" content="width=device-width" /> 添加到question 中提供的源HTML 即可修复Android 浏览器中的显示（使用Android 4.2 虚拟设备）。引用上面的链接：

通常，布局视口采用供应商认为最适合查看桌面网站的宽度。

通过将元视口设置为 device-width，您可以确定您网站的宽度已针对正在查看的设备进行了优化。

【讨论】：

这绝对是它不起作用的原因。非常感谢@DanCruz，现在我的移动网站版本完美可见！！！
是的，这应该是公认的答案！就我而言，我已经解决了，正如我在自己的答案中解释的那样！

【解决方案5】：

这是一个错误；您必须强制声明高度以获得所需的效果；我做了这个fiddle。

所以，我建议你在 jQuery 或其他 js 框架中使用 .height() 方法来计算<p> 的实际高度，并在飞行中添加内联样式。这是相当不显眼的。

希望对你有所帮助。

【讨论】：

您不想计算浏览器应该为您做什么，请查看我的答案以了解问题所在。如果 CSS 标准解释说 body 默认应该是 100% 宽度，那只会是一个错误，但我太费心去检查了...

【解决方案6】：

对于android和默认导航器上的小屏幕，段落取设备宽度为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 文本自动使段落适应屏幕而无需重排。可能这种行为仅限于 P 标签，这可能被认为与 p 的语义一致。

【讨论】：

仅供参考，标题元素 (h1) 也会受到影响。
YMMV 如果您有其他版本的浏览器或不同的设置，请参阅 mcottingham 的回答。

【解决方案8】：

修复该错误的另一种简单方法：

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

blank.png 是透明的 1x1px 图像。

【讨论】：

这几乎没有意义，如果这能修复它，那么 Android 上的 CSS 就会严重损坏。