轉譯行動裝置 ASP.NET Web Pages (Razor) 網站

發行項
07/13/2023

本文說明如何在將在行動裝置上適當轉譯的 ASP.NET Web Pages (Razor) 網站中建立頁面。

您將學到什麼：

如何使用命名慣例來指定專為行動裝置設計頁面。

教學課程中使用的軟體版本

ASP.NET Web Pages (Razor) 3

本教學課程也適用于 ASP.NET Web Pages 2。

ASP.NET Web Pages可讓您建立自訂顯示器，以在行動裝置或其他裝置上轉譯內容。

在 ASP.NET Web Pages網站中建立裝置特定頁面最簡單的方式，就是使用檔案命名模式，如下所示：FileName.Mobile.cshtml。例如，您可以建立兩個版本的頁面 (，一個名為 MyFile.cshtml ，另一個名為 MyFile.Mobile.cshtml) 。在執行時間，當行動裝置要求 MyFile.cshtml時，ASP.NET 從 MyFile.Mobile.cshtml轉譯內容。否則，會轉譯 MyFile.cshtml 。

下列範例示範如何藉由新增行動裝置的內容頁面來啟用行動轉譯。 Page1.cshtml 包含內容加上導覽提要欄位。 Page1.Mobile.cshtml 包含相同的內容，但省略提要欄位。

在 ASP.NET Web Pages網站中，建立名為Page1.cshtml的檔案，並以下列標記取代目前的內容。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #navigation {
                position: absolute;
                top: 0;
                left: 0;
                width: 10em;
            }
            #content {
            margin-left: 13em;
                margin-right: 10em;
            } 
        </style>
    </head>
    <body>
        <div id="navigation"> 
            <h3>Related Sites</h3>
            <ul>
                <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
                <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
                <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
            </ul>
        </div> 
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

建立名為 Page1.Mobile.cshtml 的檔案，並以下列標記取代現有的內容。請注意，頁面的行動版本會省略流覽區段，以在較小的螢幕上進行更好的轉譯。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #content {
            margin-left: 2em;
                margin-right: 5em;
            } 
        </style>
    </head>
    <body>
        <div id="content">
            <h1>Lorem ipsum dolor</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
            At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
            no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit 
            amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
            labore et dolore magna aliquyam erat, sed diam voluptua. </p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum 
            dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 
            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
            et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
            sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </body>
</html>

執行桌面瀏覽器並流覽至 Page1.cshtml。
執行行動瀏覽器 (或行動裝置模擬器) 並流覽至 Page1.cshtml。 (請注意，您不包含 .mobile。 做為 URL.) 即使要求是 Page1.cshtml，ASP.NET 轉譯 Page1.Mobile.cshtml。

注意

若要測試行動頁面，您可以使用在桌上型電腦上執行的行動裝置模擬器。此工具可讓您測試網頁，因為它們在行動裝置上看起來 (，通常是較小的顯示區域) 。模擬器的其中一個範例是 Mozilla Firefox 的使用者代理程式切換器附加元件，可讓您從桌上出版 Firefox 模擬各種行動瀏覽器。

其他資源

Windows Phone 模擬器

轉譯行動裝置 ASP.NET Web Pages (Razor) 網站

教學課程中使用的軟體版本

其他資源

意見反應

意見反應

其他資源