为什么Android浏览器不会在整个浏览器宽度上跨越此段落？
Der*_*ler 29 html css android android-4.0-ice-cream-sandwich
问题:
问题
该段落将填充页面的完整宽度
- 火狐
- Firefox Mobile(在SGS2上使用4.0.3测试)
- 铬
- Chrome Mobile Beta(在SGS2上使用4.0.3测试)
- IE浏览器
- Internet Explorer Mobile(使用Windows Phone模拟器测试)
- Opera Mobile(在SGS2上使用4.0.3测试)
- Android原生浏览器(在SGS2和Android模拟器上使用4.0.3测试)
我该怎么做才能在默认的Android浏览器中做同样的事情？
我试过了:
请注意,此示例已缩减,以显示我在更大的页面上遇到的问题.所以我希望解决方案尽可能少破坏性.例如,将我网站上的所有段落设置为浮动似乎是一个坏主意.
width
增加CSS类的width属性值p无效.
相对值:100%并且1000%没有效果.值<100%有效(段落变薄).
绝对值:1000px不扩展宽度,低值减少它.
float
设置float : right;段落时,它将根据需要显示:
CSS重置
当我插入这些CSS重置样式时,段落的宽度不受影响.
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/或直接去那里:
mco*_*ham 12
我找到了解决这个问题的解决方案!这实际上是Android浏览器"Auto-Fit Pages"中的一个设置.关闭它将确定地解决这个问题.
麦克风
- "请关闭自动页面以正确使用本网站".哈! (2认同)
这不是一个错误,你不需要ECMAScript中的修复来解决这个问题.
您必须考虑内容所在的树.
window
\- html
\- body
\- p
\- content
因此,您的内容宽度由p元素上的CSS属性决定.因此,您希望文本的宽度与浏览器的窗口一样宽,我们可以尝试将其宽度设置为100%; 从而:
p { width: 100%; display: block; margin: 0px; padding: 0px; }
但是,您将体验到这不符合您的想法.然而,这不是一个错误,而只是对标准的误解.不要看看标准有关在元素上设置百分比宽度的信息,请参阅width可视化格式模型详细信息中的属性:
<percentage>
指定百分比宽度.百分比是根据生成的框的包含块的宽度计算的.如果包含块的宽度取决于此元素的宽度,则在CSS 2.1中未定义结果布局.
强调我的,这篇文章说它是根据包含块的宽度计算的.回顾我们的树,p包含在内body.那么,我们的包含块的宽度是多少？
我们还没有定义宽度,因此它取决于浏览器确定的某些值.
这里的解决方案是定义正文的宽度,转换为添加6个字符:
html, body, p { width: 100%; display: block; margin: 0px; padding: 0px; }
所以,现在你html的宽度是窗口body宽度的100%,宽度是html你p的宽度的100%,你的宽度是你的宽度的100%body.这应该得到所有的宽度.
最重要的是考虑你的DOM树并查看CSS标准......
这不是CSS问题,
body, p { width: 100%; }
似乎没有用,请看这个截图.
但是,如果您将背景应用于段落,则它会完全跨越.
这似乎是一个黑客,但我找不到任何其他解决方案.
background: url('');
不确定是否会在某些浏览器上显示缺少的图像x图标,
或者您可以使用空的png.
遇到此问题后,组合元视口和媒体查询提供了最简单的解决方案.只需添加问题中<meta name="viewport" content="width=device-width" />提供的源HTML,就可以在Android浏览器中修复显示(使用Android 4.2虚拟设备).引用上述链接:
通常,布局视口采用供应商已确定的宽度,以便查看桌面站点.
通过将元视口设置为设备宽度,您可以确保您的网站宽度针对正在查看的设备进行了优化.
| 归档时间： |
|
| 查看次数： |
14096 次 |
| 最近记录： |