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。（右？）

运行时完全可能只是更新它认为屏幕尺寸的内容，就像调整窗口大小一样。然后问题不是它运行了两次，而是你给出了错误的大小。如果你有一个垂直滚动条，高度太大，那就是你的打印输出中保持不变的那个。

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

Answer 2

看起来启动开发者控制台会导致维度更改。如果我先打开开发人员控制台然后刷新，我只会看到一个事件。

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

2 个答案: