在iPhone上查看網站 - 尺寸問題

我希望有一個相對簡單的解決方案。我爲一個客戶端創建了一個簡單的網站，在所有瀏覽器中按預期顯示。爲項目開發一個單獨的移動網站並不屬於工作範圍，但我希望網站能夠在現代移動瀏覽器上正確顯示。目前，在iPhone 4上，1000px寬容器的左側被剪裁（大約10px），而我無法向左滾動以查看它。我想知道這是CSS問題還是某種縮放問題？該網站可以訪問here。在iPhone上查看網站 - 尺寸問題

我已經很難找到與問題相關的任何資源，但沒有找到這個片斷：

<meta name="viewport" content="width=device-width; initial-scale=0.9;">

難道這是一個變通的開始？如果網站的默認縮放比例爲75％，但我沒有編碼移動設備的經驗，我會很高興。

來源

2012-05-25 TheNally

因此，對於我的特殊情況，我找到了一個可行的解決方案。希望這會對類似情況下的其他人有所幫助。

關鍵是，事實上，在視口meta標籤。我正在處理一個網頁，其內容僅限於居中的1000px x 600px容器。文章對此非常有幫助。

正如文章所述：「默認情況下，iPhone上的Safari會呈現您的頁面，就好像它是一個大屏幕上的桌面瀏覽器，可用於網頁內容的980像素寬度，然後它將縮小內容所以它適合小屏幕。「

在我的情況下，在固定寬度爲1000px的情況下，我留下了20px的左邊裁剪，並且無法平移。訣竅是設置一個自定義寬度（如果需要，還可以設置高度）。請務必在垂直和水平iPhone方向上檢查網站。還有其他的參數可以用於這個元標籤，但我保持簡單。

這是我包括<head></head>標籤的網站之間的代碼：

<meta name="viewport" content="width=1050px, height=650px" />

這讓我周圍的網站內容的25像素的白色邊框，並且仍然允許縮放等，這是不是一個替代iPhone特定的網站，但它確保用戶將能夠訪問該網站的所有內容。

希望這會有所幫助！

來源

2012-05-26 19:35:31 TheNally

如果你想改變一些CSS的移動視圖，這裏有一個名爲adapt.js的工具。它選擇與屏幕分辨率相關的樣式表。

來源

2012-05-25 14:30:47

@tpaksu ...這不正是我在這種情況下尋找的東西，但刪除了文檔，它似乎是一個很棒的工具。我一定會在將來使用它。謝謝。 – TheNally

我在想，你可以複製粘貼當前CSS代碼與10px右邊距或其他東西定義的body元素，然後使用這個adapt.js工具來切換這些CSS文件。 –

嘗試刪除初始比例。

<meta name="viewport" content="width=device-width;">

來源

2012-05-25 14:32:02 tallybear

不幸的是，我現在沒有iphone。這是將內容適配到移動設備而沒有單獨樣式表的典型方法嗎？ – TheNally

好吧，我已經試過了，但它沒有好的結果。當站點站立時，當iPhone垂直時，會切斷少量的左側。當手機水平時，頁眉和頁腳被切斷。隨着上面的代碼實施，沒有縮放能力，只有一小部分網站顯示。我會繼續研究這個元標籤以更好地掌握它。任何其他幫助真的很感激！ – TheNally

我有類似的問題。這解決了它。 – Luke

在iPhone上查看網站 - 尺寸問題

回答

相關問題