在 WebSharper 中显示移动页面答案

【问题标题】：Show mobile page in WebSharper在 WebSharper 中显示移动页面
【发布时间】：2016-08-14 07:30:06
【问题描述】：

我有一个 WebSharper 网站，我希望它在移动设备上具有不同的 UI。我希望服务器根据用户是否使用移动设备来响应不同的 HTML。我可以看到如何检查用户是否在 mobile device in ASP.NET 上，但我不知道如何将其移植到 WebSharper。

【问题讨论】：

标签： f# websharper

【解决方案1】：

WebSharper 中的Context 对象有一个包含原始上下文的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
    )

【讨论】：