在移動設備上的web應用程序的佈局選項

我正在編寫一個在移動觸摸設備上使用的web應用程序，首先我專注於ipad。該應用程序將包含一個縮略圖照片的網格，類似於谷歌圖片。在移動設備上的web應用程序的佈局選項

我真的很困擾這個網站的佈局，我希望縮略圖的間距相等，邊緣的邊距相同。

我嘗試了幾種方法，但遇到了所有問題。

1.我試着設計一個固定寬度爲960px的網站，並且爲這個寬度對稱地放置縮略圖和邊緣。這在一定程度上有效，但ipad默認瀏覽器寬度爲980px，因此邊緣的空白區比我想要的大。

2，和上面一樣，但我也規定：

一切現在看起來，因爲它應該在iPad上（縱向），它不是在風景太糟糕了（我想縮略圖吹並且有點像素化）。它在桌面上顯示得很好，但在iphone上無法使用，因爲一切都太小。

3.To避開上述問題，並通過蘋果themselves我試着換了上面的建議：

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

有了這個，我獲得iPhone和iPad明智的規模，但問題是我無法在我的佈局上獲得像素完美性，屏幕左右邊緣的白色空間不相等（因爲我正在處理一幅固定寬度圖像的網格，它不適合整個次數可用的空間）

任何人都可以提出最好的方法，請考慮使用javascript來調整佈局，但寧願不採取這條路線。

謝謝

來源

2011-10-27 pingu

一個很好的嘗試。我使用這個，看看我的鏈接的例子，但這只是iPhone的主要因爲iPad是不同的。我建議看在固定佈局：

http://www.gorgeouscouture.com/mobile/

http://m.oasis-stores.com/

http://m.asos.com/mt/www.asos.com

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all, handheld" />

通知我不使用HTML5的標題。這僅僅是用於移動設備的其他用途。 MyCSS：

body{width:320px;margin: 0px auto;min-height:356px;font-family:Georgia, Georgia, Arial, serif;background-repeat:repeat;background-position:50% 50%;text-align:center;background-color:#f4f8f9} 
#b{position:relative;margin-left:0px;margin-right:0px;width:auto;height:auto;background:#fff;-moz-box-shadow:0 0 3px 3px #eaeaea;-webkit-box-shadow:0 0 3px 3px #eaeaea;box-shadow:0 0 3px 3px #eaeaea} 
#content{position:absolute;width:auto;height:auto;top:25%;background:#fff}

注意固定寬度的分配。

來源

2011-10-27 08:09:22 TheBlackBenzKid

感謝您對TheBlackBenzKid的回覆，我很好奇你爲什麼設置width = device-width並給出你的頁面的固定寬度？ – pingu

我現在修改了它。順便說一下。對於我來說，user-scalable = 0在Windows Phone 7上不起作用，user-scalable = no和user-scalable = yes正在工作，1和0不起作用。我必須這樣做，因爲一些手機仍然顯示底部滾動。另一個解決方案：http://jjeffryes.blogspot.com/2010/09/prevent-horizontal-scrolling-in-your.html – TheBlackBenzKid

我會建議使用我上面發送的鏈接，因爲它們是流動的而不是固定的。儘管如此，它們仍然使用寬度=設備寬度選項 - 但它適合流體，具體取決於屏幕大小。由於我的客戶需要的解決方案是非流體佈局，因此我只能在後面做。 – TheBlackBenzKid

在移動設備上的web應用程序的佈局選項

回答

相關問題