0

iPhone 4s デバイスで div のサイズをピクセル単位で指定すると、奇妙な動作が見られます。

私のiPhoneは縦向きで幅980ピクセルです。

最初のテストとして、単純な html 実装を作成しました。これは期待どおりに機能します-divは画面の幅全体を占めますが、幅は広くありません:

<body>
  <div style="width:980px; height: 30px; background-color: red;"></div>
</body>

今GWTで、私は同じことを試みます（少なくとも同等だと思います）：

FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);

しかし、iPhone にロードすると、div は画面の幅の 2 倍に見えます。GWT はある種のスケーリングを自動的に行っていますか? iPhone 4S は Retina ディスプレイなので、ピクセル比は 2 倍です。それと何か関係あるの？

iPhone で出力 html を調べることはできませんが、Firefox で GWT のバージョンを見ると、GWT が指定した 980px サイズを実際に出力していることがわかります。

// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>

では、GWT バージョンが div を 2 倍の幅でレンダリングするのはなぜでしょうか?

- - - アップデート - - - - -

Woojah が推奨したように、スタイル定義を使用してみました。

.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}

FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");

それでも同じ動作 - iphone 4s 画面では、div はディスプレイの幅の 2 倍です。ドムは私の手書きバージョンとまったく同じに見えます。サイズは非 Retina デバイスで正しく動作します。

ありがとうございました

4

1 に答える 1

0

次のことを試すことをお勧めします。

  1. 行う：

    getElement().getStyle.setWidth(x, Style.Unit.PX); getElement().getStyle.setHeight(y, Style.Unit.PX);

それはあなたの style="width:980px; height: 30px; background-color: red;

  1. 別の方法として、css stylesheed 内で次のようなクラスを定義することもできます。 .yourCss { width:980px; height: 30px; background-color: red; }

そして、あなたのコードでflowPanel.setStyleName("yourCss");

于 2012-11-27T00:16:29.433 に答える