0

在以像素为单位指定 div 的大小时，我在 iphone 4s 设备上看到了奇怪的行为。

我的 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 似乎是屏幕宽度的两倍。GWT 是否会自动进行某种缩放？我知道 iphone 4S 是视网膜显示器，因此它的像素比是 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 渲染为 2x 宽呢？

- - - 更新 - - - - -

正如 Woojah 建议的那样，我尝试通过样式定义：

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

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

但仍然是相同的行为 - 在 iphone 4s 屏幕上，div 是显示屏宽度的两倍。dom 看起来和我的手写版本完全一样。尺寸在非视网膜设备上表现正确。

谢谢

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 回答