8


1

私はかなり詳細なフレームごとの情報入力を可能にするボウリングウェブアプリケーションを持っています。 それが可能にすることの一つは、どのピンが各ボールでノックダウンされたかを追跡することです。 この情報を表示するために、ピンのラックのように見せています。

○○○○○○○○○○○○○○○○○

画像はピンを表すために使用されます。 つまり、最後の行には4つのimgタグがあり、次にbrタグがあります。 よく働く…​ ほとんどの 問題は、IEMobileなどの小型ブラウザにあります。 この場合、テーブルに10列または11列があり、各列にピンのラックがある場合、IEは画面に収まるように列サイズを縮小しようとしますが、最終的には次のようになります。 :

○○○○○○○○○○○○○○○○○

または

○○○○○○○○○○○○○○○○○

構造は次のとおりです。

...

内側のdivの内側に空白はありません。 通常のブラウザで このページを見ると、うまく表示されるはずです。 あなたがIEMobileでそれを見れば、それは違います。

ヒントや提案はありますか? 多分それは実際にスペースを追加しないのでしょうか?

'' '' '

フォローアップ/まとめ

私は以下を含むいくつかの良い提案を受けてみました。

  • サーバー上でイメージ全体を動的に生成します。 良い解決策ですが、(GAEでホストされている)私のニーズには実際には合いません。そして、私が書きたい以上のコードがあります。 これらの画像は、第一世代の後にキャッシュすることもできます。

  • CSSの空白宣言を使用してください。 優れた標準ベースの解決策は、IEMobileの見解では惨めに失敗します。

私がやってしまったこと

頭をぶら下げ、何かをつまずく

はい、そうです、divの上部にある透明なGIFで、必要な幅に合わせたサイズです。 終了コード(簡略化)は次のようになります。


そしてCSS:

div.smallpins {background:url(/img/lane.gif)繰り返し; text-align:center。パディング:0。空白:ナラップ。 img {width:1em;} div.smallpins身長:1em。 div.smallpins img.spacer {width:4.5em;}高さ:0ピクセル。 table.game tr.leave td {パディング:0;}マージン:0。 table.game tr.leave .smallpins {最小幅:4em;}空白:ナラップ。背景:なし。 }

PS いいえ、私の最終的な解決策で他の人の明確な点をホットリンクすることはしません。

18 Answer


24


あなたは含んでいるdivでcss "nowrap"オプションを試すことができます。

{white-space: nowrap;}

それがどれほど広くサポートされているかわからない。


3


ピンについて考えられるすべての結果のイメージがないのはなぜですか。 画像がブラウザ用のレイアウトでめちゃくちゃにならない

再利用のために作成された画像をキャッシュしてその場でそれらを生成します。


3


私は過去にこの種の問題を(適切なピン配置で)画像全体を単一の画像として動的に作成することで回避してきました。 ASP.NETを使用している場合、これはGDI呼び出しを使用して行うのはかなり簡単です。 あなたはただ動的にピン配置で画像を作成して、それから単一の画像としてページに役立ちます。 画像からすべての配置の問題を取り除きます(意図されたとおり)。


3


最も意味があるのは、どの画像をその場で表示するかを変更することです。



2


とにかく画像を使用しているので、レイアウト全体を表す画像をその場で生成しませんか。 あなたはトリックをするために GDまたはhttp://www.imagemagick.org/script/index.php[ImageMagick]のような何かを使うことができます。


2


tdタグに "nowrap"を追加してください…​


1


これはしばらくここで起きています、しかし、私はこれを経て、この記事を見つけました。 何をしても、画像が連続して並ぶことができませんでした。 何があっても、彼らは包むでしょう。 私はすべて試しました。

それから私は彼らが1)シングルコラム、2)デスクトップビュー、そして3)フィットウィンドウとしてビューを選択できるクライアント上の設定があることを考え出しました。 MSDNによると、デフォルトはウィンドウに合うようになっています。 しかし、私の妻のIE携帯電話はシングルコラムにデフォルト設定されていました。 それは何も問題ありません、それは単一の列にすべてをラップします。 他の2つのオプションのいずれかに切り替えた場合、それはうまく見えました。

さて、あなたはこれをmetaタグで設定することができます:


ページ幅を320ピクセルに設定します。 自動にする方法がわからない、もし誰かが知っているなら、投稿してください。

これはv4.6より前のブラックベリーでは動作しません - ユーザーが手動でデスクトップビューに変更しない限り、あなたはシングルコラムで立ち往生しています。 4.6以降では、以下は動作するはずですが、テストしていません。



1


最大限の互換性を保つために、フレームを表す単一の画像を生成することを検討しましたか?

PHPを使用している場合は、GDを使用して、問題のHTMLを作成するのに使用するのと同じ入力に基づいて、フレームを表す画像を動的に作成できます。 これを実行する最大の利点は、PNGまたはGIFを表示できるブラウザであれば、フレームを表示できることです。


0


私はあなたが何をしているのか誤解しているかもしれませんが、私はあなたが私がやったことができると思います 地図上のロゴについて

地図の背景タイルが描かれ、それからそれぞれの画像が左に浮かぶように指示され、いくつかの興味深い余白が与えられて、それらが望みどおりに配置されるようにします(ソースを見てそれがどのように行われるかを見ます)。


0


単語結合文字U 2060を使用します(例: )