aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/mozilla/mobile
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/pt-br/mozilla/mobile
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/pt-br/mozilla/mobile')
-rw-r--r--files/pt-br/mozilla/mobile/index.html26
-rw-r--r--files/pt-br/mozilla/mobile/viewport_meta_tag/index.html85
2 files changed, 0 insertions, 111 deletions
diff --git a/files/pt-br/mozilla/mobile/index.html b/files/pt-br/mozilla/mobile/index.html
deleted file mode 100644
index 3197b37970..0000000000
--- a/files/pt-br/mozilla/mobile/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Dispositivos móveis
-slug: Mozilla/Mobile
-tags:
- - Android
- - Firefox OS
- - Mobile
-translation_of: Mozilla/Mobile
----
-<h2 id="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS" title="Mozilla/Boot to Gecko">Firefox OS</a></h2>
-
-<p>Firefox OS é um sistema operacional de código aberto (open-source) que utiliza Linux e o motor Gecko da Mozilla para rodar a interface de usuário e aceitar aplicações escritas inteiramente em HTML, CSS e JavaScript.</p>
-
-<p>Leia mais como instalar o Firefox OS e como desenvolver aplicativos para o mesmo.</p>
-
-<h2 id="Firefox_para_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android" title="Mozilla/Firefox_for_Android">Firefox para Android</a></h2>
-
-<p>Firefox para Android é um navegador web da Mozilla para dispositivos Android. Este  foi reescrito recentimento para usar as aplicações nativas do Android, tornando-o mais rápido, enxuto e mais responsivo em relação ao seu user interface. Proporcionando suporte para APIS poderosas para acessar capacidades do dispositivo como câmera e bateria do telefone.</p>
-
-<p>Leia mais sobre como ajudar a criar Firefox para Android, como usar APIS do dispositivo e como criar add-ons (extensões) para mobile.</p>
-
-<h2 id="Desenvolvimento_web_para_dispositivos_móveis"><a href="/en-US/docs/Mobile/Mobile_Web_Development" title="Mobile/Mobile_Web_Development">Desenvolvimento web para dispositivos móveis</a></h2>
-
-<p>Dispositivos móveis tem muitas diferentes caracteristicas de hardware de um desktop ou notebooks, e muitas das APIs usadas para trabalhar com eles estão ainda em processo de padronização</p>
-
-<p>Leia mais sobre como desenvolver web sites com boa aparência em dispositivos móveis e tirar proveito das novas possibilidades que elas oferecem. Aprenda como fazer para que seu site funcione bem em diferentes navegadores.</p>
diff --git a/files/pt-br/mozilla/mobile/viewport_meta_tag/index.html b/files/pt-br/mozilla/mobile/viewport_meta_tag/index.html
deleted file mode 100644
index 78e5293405..0000000000
--- a/files/pt-br/mozilla/mobile/viewport_meta_tag/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: >-
- Usando a meta tag viewport para controlar o layout em navegadores de
- dispositivos móveis
-slug: Mozilla/Mobile/Viewport_meta_tag
-translation_of: Mozilla/Mobile/Viewport_meta_tag
----
-<h2 id="Background">Background</h2>
-
-<p>Browsers para dispositivos móveis, tal como o Fennec, renderizam as páginas em uma "janela" virtual (o viewport), que costuma ser maior que a tela, fazendo com que não seja necessário "espremer" todo o layout da página para caber em uma janela pequena (o que faria "quebrar" muitos sites não otimizados para visualização em dispositivos móveis). Os usuários podem deslocar e aumentar diferentes áreas da página para visualização.</p>
-
-<p>O Safari Mobile introduziu a "viewport meta tag" para permitir aos desenvolvedores web controlar o tamanho e a escala da viewport. Atualmente, muitos outros navegadores para dispositivos móveis suportam esta tag, embora ela não faça parte de nenhum padrão web. A Apple possui uma <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW29">documentação</a> que explica bem como os desenvolvedores web podem utilizar esta tag, contudo, tivemos que realizar um trabalho investigativo para encontrar a maneira exata de como implementá-la no Fennec. Por exemplo, a documentação do Safari informa que o conteúdo da tag é composto por uma "lista separada por vírgula", no entanto, os navegadores e páginas web existentes utilizam uma combinação de vírgulas, ponto e vírgulas e espaços como separadores.</p>
-
-<p>Aprenda mais sobre os diferentes tipos de viewports em navegadores para dispositivos móveis em <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">Um Conto sobre Dois Viewports</a> no site quirksmode.org.</p>
-
-<h2 id="O_Básico_sobre_a_viewport">O Básico sobre a viewport</h2>
-
-<p>Um site tipicamente otimizado para dispositivos móveis, contém algo como o que segue:</p>
-
-<pre class="notranslate"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code></pre>
-
-<p>A propriedade <code>width</code> controla o tamanho da viewport. O valor desta propriedade pode ser definido com um número específico de píxels como por exemplo <code>width=600</code> ou com um valor especial chamado <code>device-width</code> que representa a largura da onde o conteúdo está sendo apresentado em pixels de CSS considerando uma escala de 100%. (Ainda há as propriedades <code>height</code> e <code>device-height</code>, as quais podem ser úteis para páginas com elementos que mudam de posição baseado na altura da viewport.)</p>
-
-<p>A propriedade <code>initial-scale</code> controla o nível de amplificação quando a página é carregada pela primeira vez. As propriedades <code>maximum-scale</code>, <code>minimum-scale</code>, e <code>user-scalable</code> controlam a permissão para o usuário efetuar aumento ou diminuição da página.</p>
-
-<div class="blockIndicator warning">
-<p>o uso de <code>user-scalable=no</code> pode causar problemas de acessibildade para usuários com impecílios visuais como baixa visão.</p>
-</div>
-
-<h2 id="Um_pixel_não_é_um_pixel"><a name="A_pixel_is_not_a_pixel"></a>Um pixel não é um pixel</h2>
-
-<p><span style="line-height: 1.5;">O Iphone e muitos dos telefones populares que rodam Android possuem telas entre 3 e 4-polegadas (7–10 cm) com resolução de 320—480 pixels (~160 dpi). O Firefox para Maemo roda no Nokia N900, o qual tem o mesmo tamanho físico porém possui uma resolução de 480—800 pixels (~240 dpi). Por causa disto, a última versão do Fennec exibia muitas páginas um terço menor (em tamanho físico real) do que o Iphone ou Android. Isto causou problemas de usabilidade e de leitura em muitos sites otimizados para leitura em dispositivos móveis. Peter-Paul Koch escreveu sobre este problema em </span><a class="external" href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html" style="line-height: 1.5;">Um pixel não é um pixel</a><span style="line-height: 1.5;">.</span></p>
-
-<p>O Fennec 1.1 para Maemo utilizará 1.5 pixels de hardware para cada "pixel" de CSS,  seguindo o que hoje é feito por navegadores baseados no WebKit para dispositivos Android. Isto significa que uma página com a largura definida como <code>initial-scale=1, </code>irá ser renderizada o mais próximo do tamanho físico possível no Fennec para Maemo, Safari Mobile para iPhone, e nos navegadores Android nos aparelhos com <a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range">HDPI and MDPI</a>. Isto está em concordância com a  <a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units">Especificação CSS 2.1</a>, que diz:</p>
-
-<blockquote>
-<p>Se a densidade do pixel do dispositivo de saída é muito diferente da de um monitor de computador típico, o navegador deverá redimensionar os valores do pixel. Recomenda-se que a unidade do pixel refira-se ao número integral de pixels do dispositivo que mais se aproxima do pixel de referência. Recomenda-se que o pixel de referência seja o ângulo visual formado entre um dispositivo com com uma densidade de pixel de 96dpi e a distância de um braço em relação ao leitor.</p>
-</blockquote>
-
-<p>Para os desenvolvedores web, isto significa que uma resolução de 320px será apresentada na largura total no modo retrato em escala 1, em todos os dispositivos móveis mencionados acima, e eles poderão dimensionar seus layouts e imagens com corformidade. Entretanto, lembre-se de que nem todos os dispositivos móveis possuem a mesma largura; você deve certificar que suas páginas irão funcionar bem em modo paisagem ou em dispositivos com largura maior, como o iPad e outros tablets Android.</p>
-
-<p>Em telas com 240-dpi, páginas definidas com <code>initial-scale=1</code> serão efetivamente aumentadas para 150% tanto pelo Fennec quanto pelo Android WebKit. O texto das páginas ficará mais suave e nítido, porém as imagens em bitmap provavelmente não terão nenhuma vantagem na visualização em tela cheia. Para obter imagens mais nítidas nestas telas, os desenvolvedores web podem querer projetar as imagens - ou todo o layout – em uma escala de 150% em relação ao seu tamanho final (ou 200%, para suportar dispositivos com 320-dpi tais como as telas de retina do iPhone) e então dimensioná-las com uma menor escala usando CSS ou as propriedaes da viewport.</p>
-
-<p>A razão padrão depende da densidade da tela. Em uma tela com densidade menor que 200dpi, a razão é de 1.0.  Em telas com densidades entre 200 e 300dpi, a razão é de 1.5. Para telas com densidade superior a 300dpi, a razão será dada pelo maior inteiro menor ou igual à <em>densidade</em>/150dpi. Note que a razão padrão é real somente quando a escala da viewport está configurada como 1. Do contrário, a relação entre um pixel de hardware e um pixel CSS dependerá também do nível corrente de aumento (zoom) aplicado.</p>
-
-<h2 id="Largura_da_viewport_e_largura_da_tela">Largura da viewport e largura da tela</h2>
-
-<p>Muitos sites definem sua viewport como <code>"width=320, initial-scale=1"</code> para encaixar-se precisamente na tela do iPhone no modo retrato. Como mencionado acima, isto causou <a class="external" href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">problemas</a> quando o Fennec 1.0 renderizou estes sites, especialente no modo paisagem. Para corrigir esta situação, o Fennec 1.1 irá expandir a largura da viewport se necessário para preencher a tela na escala requisitada. Isto atende ao comportamento do Android e Safari Mobile, e é especialmente útil em dispositivos com telas grandes como o iPad. (Allen Pike's <a class="external" href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Escolhendo uma viewport para sites para iPad</a> tem uma boa explanação para desenvolvedores web.)</p>
-
-<p>Para as páginas que indicam uma escala máxima ou inicial, isto significa que a propriedade <code>width</code> será traduzida para uma largura <em>minima da </em>viewport. Por exemplo, se o layout necessita ao menos 500 pixels de largura, então você pode fazer uso de tal marcação. Quando a tela tem largura maior que 500 pixels, o navegador irá expandir a viewport (ao invés de somente aumentar o zoom) para que ela se encaixe adequadamente na tela:</p>
-
-<pre class="notranslate">&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
-
-<p>O Fennec 1.1 também adicionou suporte para as propriedades <code>minimum-scale</code>, <code>maximum-scale</code>, e <code>user-scalable</code>, com valores padrão e limitis, similar aos feitos pelo <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari</a>. Estas propriedades afetam a escala inicial e largura, bem como limitam modificação no nível de aumento (zoom).</p>
-
-<p>Os navegadores para dispositivos móveis tratam as mudanças de orientação de forma difente um do outro. Por exemplo, o Safari Mobile, frequentemente apenas aumenta a página quando muda da orientação retrato para a orientação paisagem ao invés de modificar o layout original da página como ela deveria ser se fosse carregada inicialmente já no modo de paisagem. Caso os desenvolvedores web desejem manter consistentes as suas configurações de escala durante modificações de orientação no iPhone, eles precisam definir o valor <code>maximum-scale</code> para prevenir este aumento automático, o qual possui o efeito colateral de não permitir também a utilização do aumento (zoom) por parte do usuário:</p>
-
-<pre class="notranslate">&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
-
-<p>Isso não é necessário no Fennec pois, quando o dispositivo muda a orientação, o Fennec atualiza automaticamente o tamanho da viewport, o layout da página e as propriedades JavaScript/CSS, como o <code>device-width</code>, baseado nas novas dimensões para a janela.</p>
-
-<h2 id="Tamanhos_comuns_da_viewport_para_dispositivos_móveis_e_tablets">Tamanhos comuns da viewport para dispositivos móveis e tablets</h2>
-
-<p>Se o que você está querendo saber é quais dispositivos móveis e tablets têm quais larguras de viewport, existe uma lista abrangente de <a href="http://viewportsizes.com/" title="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">tamanhos de viewport para dispositivos móveis e tablets aqui</a>. Há informações como a largura da viewport quando o dispositivo está na orientação retratou ou paisagem bem como o tamanho físico das telas, sistema operacional e a densidade de pixels de cada dispositivo.</p>
-
-<h2 id="Padrões">Padrões</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
- <td>{{Spec2('CSS3 Device')}}</td>
- <td>Non-normatively describes the Viewport META element</td>
- </tr>
- </tbody>
-</table>
-
-<p>Existe uma demanda de utilização clara pela tag viewport, levando em conta que ela é suportada pelos mais populares navegadores para dispositivos móveis e é utilizada por milhares de web sites. Seria bom ter um padrão oficial para a utilização das propriedades da viewport para as páginas web. De acordo com a especificação HTML5, extensões da tag  <code>meta</code> devem primeiramente ser registradas em <a class="external" href="http://wiki.whatwg.org/wiki/MetaExtensions">WHATWG wiki</a> para então passar pelo processo de padronização W3C. Se isso ocorrer, então nós da Mozilla, trabalharemos para garantir que implementaremos qualquer modificação realizada durante o processo de padronização.</p>