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

当我以像素为单位指定div的大小时，我在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看起来是屏幕宽度的两倍。 GWT是否会自动进行某种缩放？我知道iPhone 4S是一个视网膜显示器，因此它具有2个像素的比例。这是什么东西？

我不能检查我的iphone输出HTML，但是当我看GWT版本在Firefox中，我可以看到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看起来和我手写的版本完全一样。尺寸在非视网膜设备上正确运行。

谢谢

来源

2012-11-26 user291701

我会recommmend您尝试以下方法：

做：

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

这是您 style="width:980px; height: 30px; background-color: red;

相当于

另一种方法是defina里面你的CSS stylesheed一类像 .yourCss { width:980px; height: 30px; background-color: red; }

，然后在你的代码做flowPanel.setStyleName("yourCss");

来源

2012-11-27 00:16:29 fernandohur

好主意，只是去尝试，但遗憾的是仍然相同的行为，股利是它应该是2倍的宽度。 – user291701

oof，所以它看起来像移动Safari浏览器自动放大我的gwt页面实现，但不是手写的。不能相信我这一整段时间都错过了。 – user291701

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

回答

相关问题