所以我在 Elm 中做了一个非常基本的登录页面，我想根据初始屏幕尺寸确定要使用的图片，然后再次调整大小。我在 Window 模块上找到了 resize 功能，并使其正常工作，但我也不知道如何在加载时执行此操作。
我正在寻找类似的东西：
initialModel : Model
initalModel model =
{width = Window.size.width}
我最终将图片制作为 div 上的背景图片，然后根据屏幕尺寸更改图片，但感觉不太理想。是使用 elm-css 的下一个最佳方法吗？ 我错过了一些明显的东西吗？
【问题讨论】：
要在应用加载时获取值，您可能需要使用 Html.programWithFlags 并通过 Javascript 传递窗口大小。
type alias Flags =
{ windowWidth : Int }
type alias Model =
{ windowWidth : Int, ... }
main =
Html.programWithFlags
{ init = init
, update = update
, subscriptions = \_ -> Sub.none
, view = view
}
init : Flags -> ( Model, Cmd Msg )
init flags =
{ windowWidth = flags.windowWidth } ! []
您在应用启动时传入标志，如下所示：
var app = Elm.Main.fullscreen({ windowWidth: window.innerWidth })
【讨论】：
您可以在没有 javascript 的情况下使用 elm-lang/window 来执行此操作。
首先导入Window 和Task
你需要这样的消息：
type Msg
= SetWindowSize Window.Size
然后你只需初始化你的程序：
Html.program
{ init = ( [model], Task.perform SetWindowSize Window.size )
...
}
这将获得窗口的初始大小。
如果要持续跟踪窗口大小变化，需要订阅Window.resizes
【讨论】：