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

Question

У меня есть веб-сайт WebSharper, и я хочу, чтобы у него был другой интерфейс, когда на мобильном устройстве. Я хотел бы, чтобы сервер отвечал на разные HTML-файлы в зависимости от того, находится ли пользователь на мобильном устройстве или нет. Я вижу, как проверить, находится ли пользователь в mobile device in 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 
    )