以像素爲單位設置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的精確寬度？

回答

相關問題