2011-10-27 6 views
1

私はモバイルタッチデバイスで使用するためのWebアプリケーションを作成しています。まず、私はipadに集中しています。アプリケーションには、Google画像に類似したサムネイル写真のグリッドが含まれます。モバイルデバイス上のWebアプリケーションのレイアウトオプション

私はこのサイトのレイアウトに本当に苦労しています。サムネイルが均等に配置され、エッジのサイズが同じであることを確認します。

私はいくつかの方法を試しましたが、すべてに問題がありました。

1.私は960pxの固定幅でサイトをデザインしようとし、サムネイルとその余白をこの幅に対して対称にレイアウトしました。これはある程度まで機能しましたが、ipadはデフォルトでブラウザの幅を980pxに設定していました。

2.上記と同じですが、私はまた、指定された:それは(ポートレート)で計算された上で、それは風景の中にあまりにも悪くはないはずですとすべてが今に見える

(私はサムネイルが溶断していると思いますアップ、そして少しピクセル化されています)。それはデスクトップ上で正常に表示されますが、すべてが小さすぎるので、iPhoneでは使用できません。

3.Toは、上記の問題ラウンドを取得する、と私は上記を交換しようとしたリンゴthemselvesにより示唆されるように:これで

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

、私はiPhoneとiPadの両方のための賢明な規模が、問題を取得します私は自分のレイアウトにピクセル完璧を得ることができません、画面の左右の端にある空白は等しくありません(私は固定幅の画像のグリッドを扱っているので、利用可能なスペース)

誰もが最高のアプローチを提案することができます、私はレイアウトを調整するためにJavaScriptを使用することを検討したしかし、この経路を取らないことを好むだろう。

ありがとうございました

答えて

0

良い試みです。私はこれを使用して、例のための私のリンクを参照してくださいしかし、これは主にiPadのためにiPhoneのためだけです。

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} 

ただし、固定幅の割り当てに注意してください。

+0

返信ありがとうございますTheBlackBenzKid、私はあなたの幅=デバイス幅を設定し、あなたのページの固定幅を与える理由について興味がありますか? – pingu

+0

私は今それを変更しました。ところで。 user-scalable = 0はWindows Phone 7 for me、user-scalable = noおよびuser-scalable = yesでは動作しません.1と0は動作しません。私はこれを行う必要がありますいくつかの携帯電話がまだ下のスクロールを表示するためです。もう1つの解決策:http://jjeffryes.blogspot.com/2010/09/prevent-horizo​​ntal-scrolling-in-your.html – TheBlackBenzKid

+0

流動性があり修正されていないので、上記のリンクを使用することをおすすめします。彼らはまだwidth = device-widthオプションを使用していますが、画面サイズに応じて流体に適合します。クライアントが必要とするソリューションは流体のないレイアウトなので、後で行うだけです。 – TheBlackBenzKid

関連する問題