在 Elm 中使用 Elm.fullscreen 时 Window.dimensions 被触发两次

Question

考虑以下程序：

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)

我看到出现了一个垂直滚动条：

有什么解决办法吗？

Answer 1

您看到两个打印输出的事实意味着 view 被调用了两次。一般来说，这意味着 view 映射的任何信号都可以更新，但这里只有 Window.dimensions。（对吗？）

运行时完全有可能只是更新它认为的屏幕尺寸，就像您调整 window 的大小一样。那么问题不在于它运行了两次，而是你得到了错误的尺寸。如果您有一个垂直滚动条，则高度太大，并且在您的打印输出中保持不变。

从调试的角度来看，您是否尝试过让您的 HTML 和 JS 尽可能类似于 elm-lang/try？例如，删除 initialSeed 端口值？（如果您没有在 Elm 中声明传入端口，那应该是一个直接的运行时错误，如果没有请报告。）如果您将浏览器的大小调整为已知的 window 大小，这些值与那个有何不同？您也可能需要在 body 元素上禁用边距或填充。

Answer 2

似乎调出开发者控制台导致了尺寸变化。如果我先打开开发者控制台然后刷新，我只会看到一个事件。

在 Elm 中使用 Elm.fullscreen 时 Window.dimensions 被触发两次

Window.dimensions is triggered twice when using Elm.fullscreen in Elm

dom

elm