混淆「initial-scale = 1.0」 - iphone 3GS vs 4

我的網站在移動設備上正確縮放時遇到了一些問題。混淆「initial-scale = 1.0」 - iphone 3GS vs 4

我們有一個網站，其設計的最小寬度爲640px，最大不限。我目前的meta標籤： - ：1，它會看起來蹩腳

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

現在我感到困惑的是，如果我用「初始規模= 1.0」，很明顯，網站將調整1零件在iPhone 3Gs上（只會看到一半的網站）。現在，在Iphone 4上（640px寬的分辨率），如果我使用「initial-scale = 1.0」，它將在640px下正確縮放。或者，如果圖形是480像素，3G需要scale = .667，而iOS 4需要1.3，對不對？

那麼如何讓網站能夠完美地融入邊緣？瀏覽器能否檢測到設備寬度，然後相應地設置比例？有很多不同的設備寬度在那裏......機器人，老年的iPhone，黑莓等

得到相當frusterated :(覺得我缺少的，我應該已經知道一些重要的事情。

編輯看起來'初始縮放'元標記應該是相對於視口縮放網站，然後使用width = device-width來設置實際的視口大小。

我似乎遇到的問題是視口不適合使用該設備，無論使用什麼標籤，它都保持在640px。我在這裏丟失了什麼？

來源

2011-08-22 Jonathan Coe

http://stackoverflow.com/questions/12723844/an droid-viewport-setting-user-scalable-no-breaks-width-zoom-level-of-viewpor/19430097＃19430097 – Habib

好吧，我理解了它...基本。

因爲我的設計實際上是視口大小的兩倍（排序），所以關鍵就是使用「initial scale = 0.5」。它可以在兩個設備（3G和4）上正常工作，並且在Android設備上或多或少地正確運行等。

有點棘手，似乎應該有更好的方法來做到這一點，但暫時，有用。

感謝所有提供意見的人。

來源

2011-09-30 16:38:53

我有同樣的確切問題，並使用相同的確切解決方案...我想知道如果你找到一個更好的方式來處理這個？ – jac300

接近2015年底，我想知道同樣的事情，這仍然是最好的解決方案嗎？它對我有用，但感覺很髒。我用0.67。我認爲這個比例應該根據設備的像素密度而有所不同。這感覺不對，但沒有其他的更好。 – Spencer

我相信答案是你想告訴網絡瀏覽器總是將網站縮放到640像素。我甚至會關閉用戶擴展網站的能力，以便流浪者不會重新規劃一切。

試試這個：

<meta name="viewport" content="width=640; user-scalable=no;" />

來源

2011-08-22 20:02:16 profMobi

試過......沒有工作......在'寬度'字段中沒有任何工作。嘗試過的設備寬度，嘗試640，嘗試320，沒有什麼改變網站的規模。只有初始比例可以做任何事情，但這僅僅是一種設備特有的，所以沒有任何幫助:( –

+15

防止用戶在移動設備上縮放頁面是非常有用的。 – TravisO

使用固定像素寬度對我們最有效，但不要求可擴展的特性 –

「寬度」是告訴瀏覽器你的網站有多寬，放大率爲100％。如果您將網站設計爲流暢，您可以在此處指定「設備寬度」，並且瀏覽器不需要使用任何縮放，因爲您的佈局旨在適合任何視口寬度。

「初始縮放」用於覆蓋某些設備的默認行爲以放大或縮小您的網站，以使網站寬度（您在上面指定）與屏幕寬度相匹配。把它設置爲1基本上是說：「不要縮放這個，如果我的網站太大了屏幕，使用滾動條，如果太窄，留下邊的空白處」。如果您確實希望自己的網站準確填寫屏幕寬度，請不要使用初始縮放比例。

來源

2011-11-09 12:21:21 londonwebguy

我認爲原始郵件的主要問題是分號碼不能在iPhone 4+上使用。它只適用於逗號作爲分隔符（或者只有設備寬度設置）。其他瀏覽器似乎更寬容。

的我可靠以下工作：

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

你還需要從橫向滾動禁用的身體和文件：對Mozilla的網站的詳細信息

body, html 
{  
    overflow-x: hidden;   
}

很好的鏈接：

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

來源

2012-05-21 07:41:13

使用這個，但離開初始規模爲我工作。當我旋轉設備時發生了什麼問題，我遇到了麻煩。 'width = device-width，maximum-scale = 1，user-scalable = no「，name：」viewport「' –

混淆「initial-scale = 1.0」 - iphone 3GS vs 4

回答

相關問題