Partilhar via

Renderizando sites de Páginas da Web do ASP.NET (Razor) para dispositivos móveis

  • Artigo

por Tom FitzMacken

Este artigo descreve como criar páginas em um site do Páginas da Web do ASP.NET (Razor) que será renderizado adequadamente em dispositivos móveis.

O que você aprenderá:

  • Como usar uma convenção de nomenclatura para especificar que uma página foi projetada especificamente para dispositivos móveis.

Versões de software usadas no tutorial

  • Páginas da Web do ASP.NET (Razor) 3

Este tutorial também funciona com Páginas da Web do ASP.NET 2.

Páginas da Web do ASP.NET permite criar telas personalizadas para renderizar conteúdo em dispositivos móveis ou outros dispositivos.

A maneira mais simples de criar uma página específica do dispositivo em um site Páginas da Web do ASP.NET é usando um padrão de nomenclatura de arquivo como este: FileName.Mobile.cshtml. Você pode criar duas versões de uma página (por exemplo, uma chamada MyFile.cshtml e outra chamada MyFile.Mobile.cshtml). Em tempo de execução, quando um dispositivo móvel solicita MyFile.cshtml, ASP.NET renderiza o conteúdo de MyFile.Mobile.cshtml. Caso contrário, MyFile.cshtml será renderizado.

O exemplo a seguir mostra como habilitar a renderização móvel adicionando uma página de conteúdo para dispositivos móveis. Page1.cshtml contém conteúdo mais uma barra lateral de navegação. Page1.Mobile.cshtml contém o mesmo conteúdo, mas omite a barra lateral.

  1. Em um site Páginas da Web do ASP.NET, crie um arquivo chamado Page1.cshtml e substitua o conteúdo atual pela marcação a seguir.

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

  2. Crie um arquivo chamado Page1.Mobile.cshtml e substitua o conteúdo existente pela marcação a seguir. Observe que a versão móvel da página omite a seção de navegação para melhor renderização em uma tela menor.

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

  3. Execute um navegador da área de trabalho e navegue até Page1.cshtml. mobilesites-1

  4. Execute um navegador móvel (ou um emulador de dispositivo móvel) e navegue até Page1.cshtml. (Observe que você não inclui .mobile. como parte da URL.) Embora a solicitação seja para Page1.cshtml, ASP.NET renderiza Page1.Mobile.cshtml.

    mobilesites-2

Observação

Para testar páginas móveis, você pode usar um simulador de dispositivo móvel executado em um computador desktop. Essa ferramenta permite testar páginas da Web como elas seriam exibidas em dispositivos móveis (ou seja, normalmente com uma área de exibição muito menor). Um exemplo de simulador é o complemento Switcher do Agente de Usuário para o Mozilla Firefox, que permite emular vários navegadores móveis de uma versão da área de trabalho do Firefox.

Recursos adicionais

Emulador do Windows Phone