Skip to content

Como ativar e usar o modo de design responsivo no Safari

10 de abril de 2021

Começando no Safari versão 9 no OS X El Capitan, a Apple introduziu o Modo de Design Responsivo. Essa interface ajuda os desenvolvedores da web a projetar experiências da web em vários tamanhos de tela, orientações e resoluções. O Design Responsivo ajuda os desenvolvedores a garantir que seus sites e aplicativos sejam compatíveis com vários dispositivos e plataformas. Veja como ativar o modo de design responsivo no navegador Safari. As informações neste artigo se aplicam ao Safari 13 ao Safari 9, abrangendo o macOS Catalina ao OS X El Capitan. O Modo de Design Responsivo não está disponível na versão do Safari para Windows, que a Apple não oferece mais suporte.

Desenvolvedores de aplicativos móveis no escritório usando o modo de design responsivo do Safari

gilaxia / Getty Images

Como ativar o modo de design responsivo no Safari

Para ativar o Modo de design responsivo do Safari, junto com outras ferramentas de desenvolvedor do Safari:

  1. Vou ao Safári menu e selecione Preferências. Pressione o atalho do teclado Comando+, (vírgula) para acessar as Preferências rapidamente.

  2. No Preferências caixa de diálogo, selecione o Avançado aba.

    A guia Avançado

  3. Na parte inferior da caixa de diálogo, selecione o Mostrar menu de desenvolvimento na barra de menu caixa de seleção.

    A opção "Show Develop" nas configurações do Safari

  4. Agora você verá Desenvolver na barra de menu superior do Safari.

    O menu Desenvolver no Safari

  5. Selecione Desenvolver > Entrar no modo de design responsivo na barra de ferramentas do Safari. Pressione o atalho do teclado Opção+Comando+R para entrar no Modo de design responsivo rapidamente.

    Selecione Desenvolver> Entrar no modo de design responsivo na barra de ferramentas do Safari.” class=”lazyload”      id=”mntl-sc-block-image_1-0-29″ ></p>
</li>
<li>
<p>A página da web ativa é exibida no Modo de design responsivo.  Na parte superior da página, escolha um dispositivo iOS ou uma resolução de tela para ver como a página será renderizada.</p>
<p><img decoding=

  6. Como alternativa, veja como sua página da web será renderizada em várias plataformas usando o menu suspenso acima dos ícones de resolução.

    Veja como sua página da web será renderizada em várias plataformas usando o menu suspenso acima dos ícones de resolução.

Safari Developer Tools

Além do Modo de design responsivo, o menu Safari Develop oferece outras opções úteis.

Outras ferramentas de desenvolvedor do Safari

Abrir página com

Abre a página da web ativa em qualquer navegador atualmente instalado no Mac.

Agente de usuário

Ao alterar o Agente do usuário, você pode fazer um site pensar que está usando outro navegador.

Mostrar Inspetor da Web

Exibe todos os recursos de uma página da web, incluindo informações CSS e métricas DOM.

Mostrar console de erro

Exibe erros e avisos de JavaScript, HTML e XML.

Mostrar fonte da página

Permite visualizar o código-fonte da página da web ativa e pesquisar o conteúdo da página.

Mostrar recursos da página

Exibe documentos, scripts, CSS e outros recursos da página atual.

Mostrar editor de trechos

Permite editar e executar fragmentos de código. Este recurso é útil do ponto de vista de teste.

Mostrar construtor de extensão

Ajuda a construir extensões do Safari, empacotando seu código de acordo e anexando metadados.

Iniciar a gravação da linha do tempo

Permite registrar solicitações de rede, execução de JavaScript, renderização de página e outros eventos no WebKit Inspector.

Caches vazios

Exclui todos os caches armazenados no Safari, não apenas os arquivos de cache de sites padrão.

Desativar caches

Com o cache desabilitado, os recursos são baixados de um site cada vez que uma solicitação de acesso é feita, em vez de usar o cache local.

Permitir JavaScript do campo de pesquisa inteligente

Desativado por padrão por razões de segurança, este recurso permite que você insira URLs contendo JavaScript na barra de endereço do Safari.