如何將網站縮放到iPhone的寬度？

我有液晶佈局網站，顯示1920×1080像素（8×240像素）列。它們之間沒有空格。我說這HEAD：如何將網站縮放到iPhone的寬度？

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" > 
<meta name="viewport" content="width=device-width; height=device-height;">

我試着在上面的代碼不同的設置，但無論我在iPhone 2G和4S做到這一點始終顯示（4×240像素）的列（480×320像素和960x640px分辨率）。

我希望它顯示3或2列，因爲第一列包含文本，它現在很難讀。

我只是想在iPhone上將寬度除以兩。如何才能做到這一點？

此外，當我製作瀏覽器480x320px時，我的網站在iPhone（480x320px）和桌面上的顯示方式不同。這是爲什麼？

來源

2012-03-14 Atadj

你在找什麼叫做響應式網頁設計。 http://en.wikipedia.org/wiki/Responsive_Web_Design – Stefan 2012-03-14 11:24:59

這是正確的，但這並沒有回答我的問題，爲什麼上述解決方案不起作用。感謝您的鏈接！ – Atadj 2012-03-14 12:04:43

好的，這裏有兩個關於'meta viewport'的好鏈接; https://developer.mozilla.org/en/Mobile/Viewport_meta_tag和http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html – Stefan 2012-03-14 12:07:43

我之前沒有使用過meta viewport，但將其設置爲兩次似乎很奇怪，爲什麼在其中一個使用分號;而在另一箇中使用分號,？

這似乎更適合我，但我還沒有測試過;

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,user-scalable=yes,width=960" />

希望它有幫助！

來源

2012-03-14 12:23:40 Stefan

它的工作原理，但沒有初始比例：1 :)我將寬度設置爲800。 – Atadj 2012-03-14 13:16:58

我發現的最佳方式是使用jquery根據屏幕大小切換視口設置。

if($(window).width() >= 768) { 
    // Change viewport for smaller devices 
    $('meta[name=viewport]').attr('content','width=959'); 
}

來源

2014-08-02 21:12:13 Kinoli

如何將網站縮放到iPhone的寬度？

回答

相關問題