Question

问题：

enter image description here

问题

该段落将填写

中页面的完整宽度

火狐
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`

增加width CSS类上p属性的值无效相对值：100%和1000%无效。值<100％有效（段落变薄）绝对值：1000px不会扩展宽度，低值会降低宽度。

`float`

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

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/或直接访问： enter image description here

Answer 1

我找到了解决这个问题的解决方案！这实际上是Android浏览器中的一个设置＆＃34;自动调整页面＆＃34;。关闭它将确定地解决这个问题。

麦克

Answer 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：

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

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

我们尚未定义该宽度，因此它取决于浏览器确定的某些值。

这里的解决方案是定义正文的宽度，转换为添加6个字符：

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

因此，现在，html的宽度是窗口宽度的100％，body的宽度是html和p的宽度的100％宽度是body的100％。这应该得到所有的宽度。

底线是考虑你的DOM树并查看CSS标准......

Answer 3

这不是CSS问题，

body, p { width: 100%; }

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

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

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

 background: url('');

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

Answer 4

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

通常，布局视口采用供应商决定的宽度，以便查看桌面网站。

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

Answer 5

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

所以，我建议你在jQuery或其他js框架中使用.height（）metod来计算<p>的实际高度，并在fly中添加内联样式。这是非常不引人注目的。

我希望我能提供帮助。

Answer 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＆amp; amp;的某些媒体查询设备宽度高度。

Answer 7

我不认为这是一个错误：如果我从纵向移动到横向，我的Android 4会改变p的宽度，如果我双击缩放，它就完全适合屏幕。

请注意，移动设备的视口通常在宽度上显示大约1000像素（可能是1024），而屏幕较小;当你说100％浏览器可能使用屏幕宽度，而不是视口宽度。这使您可以通过dblclick自动将段落自动调整到屏幕而不进行回流。可能这种行为仅限于P标签，这可以考虑与p的语义一致。

Answer 8

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

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

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

为什么Android浏览器不会在整个浏览器宽度上跨越此段落？

问题：

问题

我试过了：

`width`

`float`

CSS重置

`position`

来源：

8 个答案: