Показать мобильную страницу в WebSharper

Question

У меня есть веб-сайт WebSharper, и я хочу, чтобы на мобильном устройстве он имел другой пользовательский интерфейс. Я хотел бы, чтобы сервер отвечал другим HTML в зависимости от того, находится ли пользователь на мобильном устройстве или нет. Я вижу, как проверить, находится ли пользователь на мобильном устройстве в ASP.NET, но не могу сказать, как перенести это на WebSharper.

Answer 1

Context объект в WebSharper имеет Environment словарь, который содержит оригинальный контекст. Вы можете достичь Request.Browser.IsMobileDevice через это. Используя шаблон клиент-сервер UI.Next, вы можете сделать что-то вроде этого:

module Site

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Server

type EndPoint =
    | [<EndPoint "/">] Home

open WebSharper.UI.Next.Html

type Page = { Desktop: Doc; Mobile: Doc }
let mkPage desktop mobile = { Desktop = desktop; Mobile = mobile }

let HomePage =
    mkPage
    <| h1 [text "Desktop page!"]
    <| h1 [text "Mobile page!"]

let PickPage (ctx : Context<_>) page =
    let context = ctx.Environment.["HttpContext"] :?> System.Web.HttpContextWrapper
    if context.Request.Browser.IsMobileDevice then page.Mobile
    else page.Desktop
    |> Content.Page

[<Website>]
let Main =
    Application.MultiPage (fun ctx endpoint ->
        match endpoint with
        | EndPoint.Home -> PickPage ctx HomePage
    )