Acerca de las imágenes inteligentes con proporción de píxeles de dispositivo del lado del cliente (DPR) client-side-dpr

CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

La solución de imágenes inteligentes actual utiliza cadenas del agente de usuario para determinar el tipo de dispositivo (escritorio, tableta, móvil, etc.) que se está utilizando.

Las capacidades de detección de dispositivos (RGPD basado en cadenas de agente de usuario) son inexactas a menudo, especialmente en dispositivos Apple. Además, cada vez que se inicia un nuevo dispositivo, debe validarse.

El RGPD del lado del cliente le ofrece valores 100% precisos y funciona con cualquier dispositivo, ya sea Apple o cualquier otro dispositivo nuevo que se haya iniciado.

Uso del código RGPD del lado del cliente

Aplicaciones procesadas del lado del servidor

  1. Cargar inicio de trabajo del servicio (srvinit.js) incluyendo la siguiente secuencia de comandos en la sección del encabezado de la página del HTML:

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

    Adobe recomienda cargar esta secuencia de comandos before cualquier otra secuencia de comandos para que el trabajador de servicio comience la inicialización inmediatamente.

  2. Incluya el siguiente código de etiqueta de imagen de RGPD en la parte superior de la sección de cuerpo de la página de 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">
    

    Es obligatorio incluir este código de etiqueta de imagen DPR before todas las imágenes estáticas de la página HTML.

Aplicaciones procesadas del lado del cliente

  1. Incluya las siguientes secuencias de comandos de RGPD en la sección del encabezado de la página HTML:

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

    Puede combinar ambos scripts de RGPD en uno para evitar múltiples solicitudes de red.

    Adobe recomienda cargar estas secuencias de comandos before cualquier otra secuencia de comandos de la página HTML.
    Adobe también recomienda almacenar en Bootstrap la aplicación en la etiqueta HTML de diferencias en lugar de en un elemento de cuerpo. La razón es porque dprImageInjection.js inserta dinámicamente la etiqueta de imagen en la parte superior de la sección del cuerpo en la página HTML.

Descarga de archivos JavaScript client-side-dpr-script

Los siguientes archivos JavaScript de la descarga solo se proporcionan como referencia de ejemplo. Si desea utilizar estos archivos en páginas de HTML, asegúrese de editar el código de cada archivo para que se ajuste a sus propios requisitos.

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

Descarga de archivos JavaScript

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