移動網站不看移動

我是Jquery的移動網站的新手，但我使用Jquery製作了這個移動網站。但是，當我在Iphone 4上查看它時，它無法像移動網站那樣正常加載。相反，它看起來像一個遠離桌面的網站。有人能告訴我我做錯了什麼，以及如何解決它？移動網站不看移動

感謝，

弗蘭克

2013-01-18 Frank G.

的可能的複製[迴應式網頁設計工作桌面上而不是在移動設備（https://stackoverflow.com/questions/14304494/responsive-web-design-is-在桌面上工作但不是在移動設備上） – showdev

你缺少視口縮放的meta標籤的唯一的事。

<meta name="viewport" content="initial-scale=1.0">

除此之外，一切都很好。

退房這個js書籤查看自己的設計將如何看在iPhone或其他移動設備快速：

對於iPhone決議，決議可以在這裏找到：iPhone resoltions，注意儘管iphone 4的實際分辨率，像素密度是雙倍的，因此分辨率已經減半。

2013-01-18 08:18:48

這有幫助。然而，與瀏覽器中的網站相比，該網站看起來奇怪或怪異。幾乎看起來不像桌面瀏覽器。爲什麼會這樣？再次感謝！！ –

它會這樣做，你需要將你的瀏覽器縮小到iphone的大小，看看它會是什麼樣子，像jquery mobile這樣的響應式框架會在分辨率發生變化時大幅改變佈局，查看我的答案以獲得幫助。 –

那麼桌面瀏覽中的網站就是我想要的移動網站的樣子。現在我的iphone手機網站看起來很糟糕。甚至不會在頂部顯示標題圖像。看看桌面網站和iphone，看看自己。 http://www.rodgersgroupllc.com/mobile –

嘗試加入這一行到您的head標籤：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

這將視口設置爲正常規模。大多數移動瀏覽器默認縮放頁面。

width屬性設置爲device-width，強制窗口寬度與設備寬度（doh！）大小相同。當瀏覽器打開頁面時，initial-scale設置比例。最後，maximum-scale=1不允許用戶縮小。

2013-01-18 08:18:58

這很有幫助。然而，與瀏覽器中的網站相比，該網站看起來奇怪或怪異。幾乎看起來不像桌面瀏覽器。爲什麼會這樣？再次感謝！！ –

回答