Question

在以像素为单位指定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看起来和我的手写版本完全一样。尺寸在非视网膜设备上正常运行。

谢谢

Answer 1

我建议您尝试以下方法：

做的：

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

这相当于你的 style="width:980px; height: 30px; background-color: red;

另一种选择是你的css样式里面的defina像一个类 .yourCss { width:980px; height: 30px; background-color: red; }

然后在您的代码中执行flowPanel.setStyleName("yourCss");

以像素为单位设置div的精确宽度？

1 个答案: