網站保存到主屏幕時iOS4上iPhone上的寬度錯誤

我有a website，在iPhone上的Safari中查看時看起來很好。在iOS3.x中，您可以將它作爲圖標保存到主屏幕，並可以正常打開。網站保存到主屏幕時iOS4上iPhone上的寬度錯誤

但是在iOS4中，雖然它仍然在Safari中看起來是正確的寬度，但如果直接從主屏幕圖標打開它，則它太寬。

我花了幾個小時擺弄視口元標記和CSS調整，但沒有喜悅的各種設置。任何人都可以看到有什麼不對，或者爲什麼它會在iOS4和iOS3中有所不同？

2010-06-22 Phil Gyford

下面是它應該看起來的截圖：http://www.gyford.com/temp/guardian1.png 而且它是從iOS4的主屏幕打開時的外觀樣式之一：http：// www .gyford.com/temp/guardian2.png – 2010-06-22 15:36:05

如果有人再次遇到這種情況，我在這裏寫下了我的最終解決方案：http://www.gyford.com/phil/writing/2010/07/06/web -page-iphone.php基本上，使用最大寬度，而不是寬度。 – 2010-07-06 15:55:07

編輯：我測試了它，並且有些事情是完全錯誤的。我在這裏幫不了你，但它可能與你的CSS有關。

原來的答覆：

這是因爲iPhone當你創建一個Web夾到你的主屏幕自動保存網站的當前縮放級別。如果你不希望發生這種情況，請確保在創建Web剪輯之前縮小一切。

來源

2010-06-22 15:50:56 Emil

謝謝你看Emil。奇怪的是，它似乎在iOS3中工作正常，而且在兩種情況下它看起來不同。我想知道渲染器有什麼不同。 – 2010-06-22 16:17:54

看起來幾乎就像該網站將自己重置爲該positin。如果您滾動一下，它會在幾秒鐘內回到頂部。你還沒有定義META-tag REFRESH，是嗎？ – Emil 2010-06-22 17:07:55

不，我不確定你的意思是「回到頂端」。我想也許這只是第一次從主屏幕打開圖標 - 最初它只是一種來自Safari的「預覽」版本，但在頁面頂部沒有Safari位置欄。當它加載真實的頁面時，它將它放置在屏幕的頂部。我不認爲這與這個問題有關。 – 2010-06-22 20:31:42

我看着你的CSS，你正在定義一個px的寬度。嘗試使用「寬度：100％」在你的div（包裝，窗口，主要等...），而不是一個px。當然，這意味着你必須「識別」該設備，併發送一個不同的CSS，如果它不是iPhone上的web視圖。

現在只是測試100％，如果它的工作，那麼你可以開始看重定向的CSS取決於正在查看頁面的設備。

希望這是有道理的，如果不讓我知道。

來源

2010-06-22 16:05:59 Louie

謝謝，但這似乎做了大致相同的事情 - 該網站在Safari中看起來不錯，但從主屏幕打開時沒有。奇怪的。 Apple文檔建議固定寬度的網站應該沒問題，如果您設置適當的視口：http://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags。HTML＃// apple_ref/html/const/viewport 「如果你的網頁窄於980像素，那麼你應該設置視口的寬度以適合你的網頁內容。如果你正在設計一個iPhone特定的web應用程序......將寬度設置爲設備寬度「。 – 2010-06-22 16:16:41

僅供參考 - 這使我瘋狂。我的主屏幕鏈接在vn 3上運行得非常好，現在它已經壞掉了。

我敢肯定，這是一個錯誤...如果/當我找出修復程序，將會作出迴應。

來源

2010-07-14 13:37:01

網站保存到主屏幕時iOS4上iPhone上的寬度錯誤

回答

相關問題