Vykreslování webů ASP.NET Webových stránek (Razor) pro mobilní zařízení

Článek
07/13/2023

Tento článek popisuje, jak vytvořit stránky na webu ASP.NET Web Pages (Razor), které se budou správně vykreslovat na mobilních zařízeních.

Naučíte se:

Jak pomocí zásad vytváření názvů určit, že stránka je navržená speciálně pro mobilní zařízení.

Verze softwaru použité v kurzu

ASP.NET Webové stránky (Razor) 3

Tento kurz funguje také s webovými stránkami ASP.NET 2.

ASP.NET Webové stránky umožňují vytvářet vlastní displeje pro vykreslování obsahu na mobilních nebo jiných zařízeních.

Nejjednodušším způsobem, jak vytvořit stránku specifickou pro zařízení na webu ASP.NET Webových stránek, je použít vzor pro vytváření názvů souborů, jako je fileName.Mobile.cshtml. Můžete vytvořit dvě verze stránky (například jednu s názvem MyFile.cshtml a jednu s názvem MyFile.Mobile.cshtml). Když mobilní zařízení za běhu požádá o soubor MyFile.cshtml, ASP.NET vykreslí obsah z souboru MyFile.Mobile.cshtml. Jinak se soubor MyFile.cshtml vykreslí.

Následující příklad ukazuje, jak povolit mobilní vykreslování přidáním stránky obsahu pro mobilní zařízení. Page1.cshtml obsahuje obsah a navigační boční panel. Page1.Mobile.cshtml obsahuje stejný obsah, ale vynechá boční panel.

Na webu ASP.NET webových stránek vytvořte soubor s názvem Page1.cshtml a nahraďte aktuální obsah následujícím kódem.

<!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>

Vytvořte soubor s názvem Page1.Mobile.cshtml a nahraďte existující obsah následujícím kódem. Všimněte si, že mobilní verze stránky vynechá navigační oddíl pro lepší vykreslování na menší obrazovce.

<!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>

Spusťte desktopový prohlížeč a přejděte na Page1.cshtml.
Spusťte mobilní prohlížeč (nebo emulátor mobilního zařízení) a přejděte na Page1.cshtml. (Všimněte si, že jako součást adresy URL nezahrnujete .mobile .) I když je požadavek na Page1.cshtml, ASP.NET vykreslí Page1.Mobile.cshtml.

Poznámka

K testování mobilních stránek můžete použít simulátor mobilního zařízení, který běží na stolním počítači. Tento nástroj umožňuje testovat webové stránky tak, jak by vypadaly na mobilních zařízeních (obvykle s mnohem menší oblastí zobrazení). Jedním z příkladů simulátoru je doplněk User Agent Switcher pro Mozilla Firefox, který umožňuje emulovat různé mobilní prohlížeče z desktopové verze Firefoxu.

Další materiály

emulátor Windows Phone

Sdílet prostřednictvím

Vykreslování webů ASP.NET Webových stránek (Razor) pro mobilní zařízení

Verze softwaru použité v kurzu

Další materiály

Váš názor

Další materiály