Android瀏覽器中的CSS佈局

我在CSS上很綠，但是我正在構建一個網頁，經過大量搜索和編碼之後，我在瀏覽器的兼容性方面做得相當好。但是，如果與其他主流瀏覽器相比，我的Android手機呈現網頁的方式會有很大差異。它看起來像這樣：Android瀏覽器中的CSS佈局

正如你所看到的，它在橫向視圖略勝一籌。由於「邊距」在橫向視圖中展開，我猜測它與我的＃sidhuvud-vanster容器或＃sidhuvud-hoger容器有關，它們的寬度均爲50％。查看Firefox/Chrome/IE中的http://viriol.dyndns.org/~elias/，看看它應該如何。

非常感謝幫助！謝謝！

/埃利亞斯

來源

2013-05-11 viriol

我試圖縮小它在今天的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瀏覽器中導致了完全相同的問題。經過一些更多的研究，我終於找到了解決方案經過一番研究後，我發現這是由默認啓用的「Auto-fit」選項引起的瀏覽器中的「bug」。

的解決方案是建立一個透明的GIF/PNG和背景H1，H2，H3 ......和對使用：

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

這可以閱讀更多關於堆棧溢出here和here。

來源

2013-05-11 11:12:33 viriol

這裏是賴以生存的規則：「從左至右依次爲除了當你漂浮」

如果你要浮動＃kontenta，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標記中。

如果您想使不同分辨率的基本佈局兼容而不使其響應，也可以考慮使用百分比來表示寬度。

來源

2013-05-11 00:52:40

謝謝，這真的很好知道。我不確定，但我認爲這不適用於我的網頁，因爲它只是img本身向右側浮動，而不是周圍的div。 div /頁面是使用960網格系統構建的。因此，如果我更改HTML標記中的順序，則div將簡單地更改位置。 – viriol 2013-05-11 11:02:51

Android瀏覽器中的CSS佈局

回答

相關問題