Android 浏览器中的 CSS 布局答案

【问题标题】：CSS layout in Android browserAndroid 浏览器中的 CSS 布局
【发布时间】：2013-05-05 17:53:48
【问题描述】：

我对 CSS 很熟悉，但我正在构建一个网页，经过大量搜索和编码后，我在浏览器兼容性方面取得了相当大的进步。但是，如果与其他主要浏览器相比，我的 Android 手机呈现网页的方式会有很大差异。它看起来像这样：

如您所见，横向视图稍好一些。由于“边距”在横向视图中扩展，我猜它与我的 #sidhuvud-vanster-container 或 #sidhuvud-hoger-container 两者都有宽度：50％。在 Firefox/Chrome/IE 中查看 http://viriol.dyndns.org/~elias/ 看看它应该是什么样子。

非常感谢您的帮助！谢谢！

/埃利亚斯

【问题讨论】：

标签： android css layout width break

【解决方案1】：

我今天尝试在CSS/HTML中缩小范围，谈谈缩小范围！

<html>
  <head>
  </head>
  <body>
    <h2>Välkommen till Västkustens Plattsättning!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </body>
</html>

这个没有 CSS 的 HTML 实际上在我的 Android 浏览器中引起了完全相同的问题。经过更多的研究，我终于找到了我的解决方案。经过一番研究，我发现这是浏览器中的一个“错误”，由默认启用的“自动调整”选项引起。

解决方案是创建一个透明的 GIF/PNG 并用作 h1、h2、h3... 和 p 的背景：

h1, h2, h3, p { background: url(../bilder/transparent.gif); }

这可以在 Stack Overflow here 和 here 上阅读更多信息。

【讨论】：

【解决方案2】：

这是一个生活规则：“从左到右除了当你漂浮时”

如果您要将 #konteta-hoger 浮动到右侧，请确保它位于 HTML 的首位。即。

<div id="kontenta-hoger">
     <img src="img/img.jpg">
</div>
<div id="kontenta-vanster">
    orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula turpis gravida tellus mattis id pretium diam dictum. Donec eget massa sit amet nulla suscipit ultricies in in justo. Sed lu
</div>

因为我们需要将img div 向右浮动。我们将它放在HTML 标记中的第一个位置。

如果您想让基本布局在不同分辨率上兼容而不使其具有响应性，您也可以考虑使用百分比作为宽度。

【讨论】：

谢谢，很高兴知道这一点。我不确定，但我认为这不适用于我的页面，因为它只是 img 本身浮动到右侧，而不是周围的 div。 div/页面是使用 960 网格系统构建的。因此，如果我更改 HTML 标记中的顺序，则 div 只会更改位置。