如何調整手機屏幕大小以適合我的內容

我在Adobe Device Central CS3上遇到了一些困難。我正在使用Html和CSS進行移動網站測試，我正在通過設備中心使用庫中的所有諾基亞手機進行測試。如何調整手機屏幕大小以適合我的內容

我做了MOCH了詩篇使用諾基亞N80是352px由416px（我的Photoshop文檔）

在我的Meta標籤，我把下面的代碼：

<meta name="viewport" content="width=device-width" /> 
<!--The iPhone will auto fit the screen --> 
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.7, maximum-scale=5.0, minimum-scale=1.0" /> 
<!-- adjusting Web pages to screens and adjusting Web page content size --> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 

<script type="text/javascript"> 
if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)) 
document.location = "http://iphone.mywebsite.com/index.html";

當我正在使用小於352px的設備查看416px內容被切碎，並且您必須橫向滾動。從我已經讀過的把「視口」放在博客上的博客假設解決問題並根據所使用的設備使內容/站點可擴展。

我還應該做一個說明，我有一個包含所有東西的包裝div，它具有固定的寬度和高度。

#wrapper { 
width:352px; 
height:416px; 
background:url(../images/Site-Bg_02.png) repeat;

}

幫助！

來源

2012-02-24 Anele

+1謝謝！單獨你的問題幫助我在Android屏幕上適合我的應用程序:-) – 2013-02-21 09:56:11

我很高興能夠通過提問來提供幫助。但是，現在我依靠媒體查詢以及使用[安迪泰勒項目之一]（http://cssgrid.net/） – Anele 2013-03-06 06:24:20

您可以將視口寬度設置爲352，但我強烈建議您改變設計頁面的靈活性，即不要使用絕對像素值。而是使用百分比寬度，並嘗試調整瀏覽器的大小（如果您無法訪問要測試的實際設備），以確保您的元素能夠以各種寬度正確匹配。

視口標籤只適用於某些設備，固定像素大小通常是移動網絡禁忌。

來源

2012-02-27 22:49:33 Ben

是的謝謝你的本。我改變了我的固定寬度。我正在實施[Grid System Fluid down to mobile]（http://cssgrid.net/） – Anele 2012-03-22 08:33:11

如何調整手機屏幕大小以適合我的內容

回答

相關問題