Window.dimensions在榆樹

使用Elm.fullscreen考慮下面的程序時觸發兩次：Window.dimensions在榆樹

module App where 

import Color exposing (..) 
import Graphics.Collage exposing (..) 
import Graphics.Element exposing (..) 
import Window 
import Debug 


view : (Int, Int) -> Element 
view (windowWidth, windowHeight) = 
    let 
    _ = Debug.log "dimensions" (windowWidth, windowHeight) 
    in 
    square 100 
     |> filled Color.grey 
     |> List.repeat 1 
     |> collage windowWidth windowHeight 


main : Signal Element 
main = 
    Signal.map view Window.dimensions

當運行Try Elm這個節目，廣場完全集中，我看到在一個單一的打印像dimensions: (689,431)瀏覽器的控制檯。這是預期的行爲。

然而，在HTML中嵌入該程序時：

<head> 
    ... 
    <script type="text/javascript" src="index.js"></script> 
</head> 
<body> 
</body> 
<script> 
    Elm.fullscreen(Elm.App, { 
    initialSeed: randomlyGeneratedNumber 
    }); 
</script>

我看到瀏覽器的控制檯創建兩個打印輸出：

dimensions: (384,204) 
dimensions: (369,204)

，我看到出現一個垂直滾動條：

任何想法如何解決這個問題？

來源

2015-11-02 Misha Moroshko

事實上，你看到兩個打印輸出意味着view被調用兩次。一般來說，這意味着view映射的任何信號都可能已更新，但這裏只有Window.dimensions。（對吧？）

運行時完全可能只更新它認爲屏幕尺寸，就像它調整窗口大小一樣。那麼問題不是它運行兩次，而是你給了錯誤的大小。如果你有一個垂直滾動條，那麼高度就太大了，這就是你的打印輸出中保持不變的那個。

從調試的角度來看，您是否嘗試過讓您的HTML和JS儘可能類似於elm-lang/try？例如，刪除initialSeed端口值？（如果你沒有在Elm中聲明傳入的端口，那應該是一個立即的運行時錯誤，如果沒有，請報告。）如果你調整瀏覽器到一個已知的窗口大小，這些值與那個值有什麼不同？也可能需要在body元素上禁用邊距或填充。

來源

2015-11-02 14:06:46 mgold

謝謝。添加'body {margin：0; }解決了這個問題。 –

看起來像是調出開發人員控制檯導致維度更改。如果我先打開開發者控制檯然後刷新，我只看到一個事件。

來源

2015-11-02 14:08:17

Window.dimensions在榆樹

回答

相關問題