正確縮放網站以顯示在iphone

我建立了一個移動網站，以適應320px寬。在這個線程（http://stackoverflow.com/questions/4520064/mobile-website-for-iphone-problems）中，它拋出了一段有用的代碼，以確保iPhone以正確的分辨率（320寬）顯示它。但是，當我旋轉手機時，它不會自動重新縮放以適應更寬的視口。正確縮放網站以顯示在iphone

關於如何解決這個問題的任何建議？

來源

2012-03-06 Andy

一些非常有用的信息，謝謝。我要通過它來看看它是什麼。謝謝。 – Andy 2012-03-06 22:58:43

您可以使用CSS media queries [w3.org]動態調整您的內容的大小。

要檢測的時候手機是縱向還是橫向，使用orientation，例如：

@media all and (orientation:landscape) { 
    /* apply your css styles here */ 
}

你也可以連接在一起的特定情況下，這取決於你想具體怎麼是。舉例來說，如果你想要的風格肖像瀏覽器的400像素的設備寬度，你會做到以下幾點：

@media all and (orientation:landscape) and (device-width:400px) { 
    /* apply your css styles here */ 
}

* 應當指出的是，媒體查詢應該在你的CSS文件的最後，否則它們將不會正確覆蓋現有的樣式。

來源

2012-03-06 22:34:37 Moses

對於我的一些移動項目，我一直在使用resize事件的事件監聽器。當設備從縱向/橫向切換（或桌面窗口調整大小）時，事件將被調用，您可以手動設置元素的高度和寬度。

這裏是什麼，我一直在使用一個簡單的例子：

window.addEventListener('resize', resizetick, false); 
<...> 
function resizetick(e) { 
    if(this.resizet) 
     clearTimeout(this.resizet); 
     resizet = setTimeout(resizecallback, 100); 
} 
<...> 
function resizecallback() { 
    <if new resolution then resize elements here> 
}

中的setTimeout/clearTimeout背後的目的是爲了防止多個調整大小。桌面瀏覽器事件不斷髮生，而調整大小和移動用戶可能會無意中改變其設備的方向。我想避免重複調整內容。

您需要綁定或以其他方式處理resize（）和resizecallback（）。我沒有一個方便的剪切和粘貼工作代碼的項目 - 抱歉。：\

來源

2012-03-06 22:30:29 tamarintech

很難說出去看網站，但我會採取刺：你明確地說網站的寬度是320px，當你旋轉它的時候手機的寬度不是這樣的。你的包裝應該是width: 100%，這樣文檔就可以重新調整它自己，或者重新縮放視口。

來源

2012-03-06 22:42:24

正確縮放網站以顯示在iphone

回答

相關問題