DocumentaçãoAEM 6.4Guia do Assets

Sobre a Smart Imaging com DPR (Device Pixel Ratio, rácio de pixels de dispositivo) do lado do cliente client-side-dpr

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Admin
  • User
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

A solução atual de Smart Imaging usa strings do agente do usuário para determinar o tipo de dispositivo (desktop, tablet, móvel e assim por diante) que está sendo usado.

Os recursos de detecção de dispositivo - DPR baseado em sequências de agente do usuário - são imprecisos com frequência, especialmente para dispositivos Apple. Além disso, sempre que um novo dispositivo for iniciado, ele deverá ser validado.

O DPR do lado do cliente fornece valores 100% precisos e funciona para qualquer dispositivo, seja o Apple ou qualquer outro novo dispositivo que foi inicializado.

Usar o código DPR do lado do cliente

Aplicativos renderizados do lado do servidor

  1. Inicialização do trabalhador do serviço de carregamento (srvinit.js) ao incluir o seguinte script na seção de cabeçalho da página HTML:

    code language-javascript 
    <script type="text/javascript" src="srvinit.js"></script>

    O Adobe recomenda carregar esse script before quaisquer outros scripts para que o trabalhador de serviço inicie a inicialização imediatamente.

  2. Inclua o seguinte código de tag de imagem do DPR na parte superior da seção do corpo da sua página do HTML:

    code language-html 
    <img src="aem_dm_dpr_1x.jpg" style="width:1px;height:1px;display:none"
    srcset="aem_dm_dpr_1x.jpg 1x, aem_dm_dpr_1.1x.jpg 1.1x, aem_dm_dpr_1.2x.jpg 1.2x, aem_dm_dpr_1.3x.jpg 1.3x, aem_dm_dpr_1.4x.jpg 1.4x, aem_dm_dpr_1.5x.jpg 1.5x, aem_dm_dpr_1.6x.jpg 1.6x,          aem_dm_dpr_1.7x.jpg 1.7x, aem_dm_dpr_1.8x.jpg 1.8x, aem_dm_dpr_1.9x.jpg 1.9x,
    aem_dm_dpr_2x.jpg 2x, aem_dm_dpr_2.1x.jpg 2.1x, aem_dm_dpr_2.2x.jpg 2.2x, aem_dm_dpr_2.3x.jpg 2.3x, aem_dm_dpr_2.4x.jpg 2.4x, aem_dm_dpr_2.5x.jpg 2.5x, aem_dm_dpr_2.6x.jpg 2.6x, aem_dm_dpr_2.7x.jpg 2.7x, aem_dm_dpr_2.8x.jpg 2.8x, aem_dm_dpr_2.9x.jpg 2.9x,
    aem_dm_dpr_3x.jpg 3x, aem_dm_dpr_3.1x.jpg 3.1x, aem_dm_dpr_3.2x.jpg 3.2x, aem_dm_dpr_3.3x.jpg 3.3x, aem_dm_dpr_3.4x.jpg 3.4x, aem_dm_dpr_3.5x.jpg 3.5x, aem_dm_dpr_3.6x.jpg 3.6x, aem_dm_dpr_3.7x.jpg 3.7x, aem_dm_dpr_3.8x.jpg 3.8x, aem_dm_dpr_3.9x.jpg 3.9x,
    aem_dm_dpr_4x.jpg 4x, aem_dm_dpr_4.1x.jpg 4.1x, aem_dm_dpr_4.2x.jpg 4.2x, aem_dm_dpr_4.3x.jpg 4.3x, aem_dm_dpr_4.4x.jpg 4.4x, aem_dm_dpr_4.5x.jpg 4.5x, aem_dm_dpr_4.6x.jpg 4.6x, aem_dm_dpr_4.7x.jpg 4.7x, aem_dm_dpr_4.8x.jpg 4.8x, aem_dm_dpr_4.9x.jpg 4.9x,
    aem_dm_dpr_5x.jpg 5x">

    É obrigatório incluir esse código de tag de imagem do DPR before todas as imagens estáticas na sua página do HTML.

Aplicativos renderizados do lado do cliente

  1. Inclua os seguintes scripts DPR na seção de cabeçalho da página HTML:

    code language-javascript 
    <script type="text/javascript" src="srvinit.js"></script>
<script type="text/javascript" src="dprImageInjection.js"></script>

    É possível combinar ambos os scripts do DPR em um para evitar várias solicitações de rede.

    O Adobe recomenda carregar esses scripts before qualquer outro script na página HTML.
    O Adobe também recomenda que você Bootstrap seu aplicativo em diff HTML tag em vez de um elemento de corpo. A razão é porque dprImageInjection.js injeta dinamicamente a tag de imagem na parte superior da seção de corpo na página HTML.

Download de arquivos JavaScript client-side-dpr-script

Os arquivos JavaScript a seguir no download são fornecidos somente como referência de exemplo. Se você pretende usar esses arquivos em HTML pages, edite o código de cada arquivo para atender aos seus próprios requisitos.

  • dprImageInjection.js
  • srvinit.js
  • srvwrk.js

Download de arquivos JavaScript

Related Articles
recommendation-more-help
4452738f-2bdf-4cd4-9b45-905a69d607ad