中心位置：固定在手機瀏覽器縮放正確

我有在頁面頂部的標誌，其具有相對於文字就像這個例子中心，並固定在視口的頂部：http://dev.markbrouwers.nl/test.html 中心位置：固定在手機瀏覽器縮放正確

<h1 style="width: 200px; height: 100px; margin: 0 auto;"> 
    <img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title"> 
</h1> 
<div style="width: 800px; margin: 0 auto;"> 
    <p>content</p> 
</div>

它完美的PC上。然而，在移動瀏覽器上，縮放標誌開始偏離中心。我讀過很多關於固定在iOS上的位置的東西（例如this），顯然iOS5和Android2.2應該可以工作，認爲它不會...它仍然漂移......有誰知道如何製作移動webkit的行爲像PC瀏覽器？

[編輯]

我編輯的HTML現在有點，H1是容器

之外我還上的iPhone和Windows做了截圖。正如您所看到的，當您在iOS上放大時，徽標將從視口中飄出。在Chrome瀏覽器中，它保留在視口的頂部中間。

Safari瀏覽器/ iOS5的截圖： enter image description here

鍍鉻/ Win7的截圖： enter image description here

來源

2012-11-14 J.H.

我測試過它在我的Android 2.3.6的Nexus One，對我來說這是正常的行爲，您的標誌，一直被網頁上居中，但是當你縮放，頁面往往會隨着手指的移動而向右滾動。但是在縮放之後，您可以將水平滾動條移動到中心，並且您的徽標也將位於頁面的中心。 – Nelson

之所以出現這種情況，是移動設備需要知道頁面的寬度，即使你的頁面寬度是340px，例如你仍然會遇到這個問題，這是因爲你的ZOOMING，而不是調整大小。

如果你希望文字是用戶的大，最好的解決辦法是有類似如下：

兩個按鈕小/大

那麼這些按鈕鏈接到一些JavaScript代碼，然後更改文本大小根據你想要的。

爲例如當點擊大時，你可能想要它去24px ，當他們點擊小時，它會變爲14px。

這是簡單的JavaScript

來源

2012-11-14 01:30:35 RussellHarrower

中心位置：固定在手機瀏覽器縮放正確

回答

相關問題