使用視口有友好的移動網站

I'm working on a website for a small festival爲朋友，但我試圖與流動佈局等手機瀏覽工作。這只是一個我想要使用經典視口腳本的網站，因此當移動設備接近它時，它將處於最小縮放比例。使用視口有友好的移動網站

HTML

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

這就是我現在不過我已經試過這種方式爲好。

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

然而，每一次我來到它的，所以你只能看到徽標放大我的移動設備上的網站。

我在做什麼錯？

另外還有兩件事我在手機上查看時已經注意到了。頁腳背景顏色不會一直延伸（如果我的設備寬度或寬度=「XXX」，則沒有區別）。然而我的頁腳的寬度是100％。我不明白這裏發生了什麼。

而我正在嘗試在內容的左側和右側添加填充或空格，以便網站不會直接放在窗口的一側。我想要有空間左右。我試圖把它放在html標籤上，但它只適用於左側？

我已去https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html和其他網站，並不能理解可能發生在這些情況下的任何情況。

任何幫助，建議，方向或指導是非常讚賞。

來源

2012-03-20 kia4567

您測試過哪些設備？我們發現了不同的Android設備，特別是以奇怪的方式處理（或有時忽略）視口元標記。 – 2012-03-20 17:37:16

現在我正在iPhone，Android和iPad上進行測試。 – kia4567 2012-03-20 18:04:29

要解決的背景問題嘗試添加此：

body { 
     min-width: 1024px; 
}

你有一個容器內的頁面的頂部部分有明確的寬度（960像素），這就是爲什麼你不具有的一個問題他們。但是，頁腳沒有明確的寬度設置。你也可以把它放在同一個div中，並在頁面的其餘部分使用id'container'。

這也應該解決你的填充問題。確保您將其添加到內容容器中。例如：

#main { 
     padding: 0 1.5em; 
}

至於縮放問題，我沒有在iPad或iPhone上看到它。既然你沒有做任何流動性或反應，這就是你應該使用的。初始縮放比例= 1所做的是將其縮放到其實際寬度，而不是將其安裝到屏幕上。

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

你可能想看看這個問題：Android ignores maximum-scale when using fixed-width viewport meta-tag爲Android問題。我沒有方便測試的Android設備，所以我不想給你提供有關該部分的不正確信息。

來源

2012-03-20 21:11:00

我不確定頂端欄所在的容器是什麼意思，因爲它是html標籤上的背景圖片，所以一旦我將max-width：1024px;在身體上它使得所有的東西都適合在第一個1024像素（因爲我現在告訴它不能超過1024，我不想）。主div的填充工作，所以謝謝你！ – kia4567 2012-03-20 22:28:11

到目前爲止，對於視口腳本，我沒有運氣，或者至少在我的iPhone上。當我使用這個它再次放大。所以我不確定它爲什麼這樣做。我的男朋友有一個機器人，我讓他一直在測試它，到目前爲止，無論我做什麼，它總是爲他放大。有什麼建議？ – kia4567 2012-03-20 22:29:51

更新我的答案，輸入有點太快，對不起。 – 2012-03-21 00:12:07

使用視口有友好的移動網站

回答

相關問題