門外漢的筆記

裝置的解析度≠顯示的範圍

顯示的範圍會因裝置上的狀態列、工具列等縮小顯示範圍，因此需妥善配置排版與增加顯示範圍。

下面是用來查看裝置與顯示範圍

<script>

        // Get the size of the device screen
        var screenWidth = screen.width;
        var screenHeight = screen.height;

        // Get the browser window size
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;

        // Get the size of the entire webpage
        const pageWidth = document.documentElement.scrollWidth;
        const pageHeight = document.documentElement.scrollHeight;

        // Showing the sizes on the webpage
        var x = document.getElementById("screen");
        x.innerHTML = "Device Screen: width: " + screenWidth + ", height: " + screenHeight + ".";

        var y = document.getElementById("window");
        y.innerHTML = "Browser Window: width: " + windowWidth + ", height: " + windowHeight + ".";

        var z = document.getElementById("page");
        z.innerHTML = "Webpage: width:" + pageWidth + ", height: " + pageHeight + ".";

    </script>

裝置對應的前端顯示頁面

在MVC的VIEW直接複製原始的頁面，然後修改檔名加上Mobile，當使用行動裝置瀏覽時，會直接顯示對應的Mobile頁面。

在使用瀏覽器模擬都可正常操作，實際使用手機也是正常，但使用平板裝置卻是直接顯示PC頁面。

若平板為Android系統，可在Global.asax新增程式碼，將Android裝置註冊為Mobile。

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Mobile")
            {
                ContextCondition = (context => context.GetOverriddenUserAgent()
                    .IndexOf("Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });

介由下面程式碼會顯示有3種裝置，分別為Default與Mobile(原本的Mobile mode)與新增的Mobile(Android裝置)。

<h2>
    Display Modes currently active
    (@DisplayModeProvider.Instance.Modes.Count mode(s))
</h2>
<ul>
    @{
        foreach (var d in DisplayModeProvider.Instance.Modes)
        {
            <li>
                @d.DisplayModeId
            </li>
        }
    }
</ul>