Estoy buscando la rotación de imágenes basada en el dispositivo. Ejemplo, si el sitio web se carga en el escritorio, debería cargar desktop.png y si el mismo sitio web se carga en el móvil, debería cargar mobile.png
Mi código JS:
<script type="text/javascript"> if (screen.width <= 720) { document.write('<a href="http://example.com/mobile"><img src="mobile.png"></a>'); } else { document.write('<a href="http://example.com/desktop"><img src="desktop.png"></a>'); } </script>He reescrito el código JS en código PHP:
if (get($screen, "width") <= 720.0) { echo "<a href=\"http://example.com/mobile\"><img src=\"mobile.png\"></a>"; } else { echo "<a href=\"http://example.com/desktop\"><img src=\"desktop.png\"></a>"; }El código JavaScript anterior funciona bien, pero mi código PHP está dando un error. ¿Alguien puede ayudar a solucionarlo?
La respuesta es NO . No puede lograr una rotación de imágenes en la web usando php, porque php es un lenguaje del lado del servidor y para crear cualquier efecto en la web necesita css (efecto simple) o javascript (efectos complejos)
Con una representación del lado del servidor (php), solo puede usar un tipo de plantilla o variables de enlace para crear la etiqueta javascript requerida como cadena en el servidor y devolverla al navegador web. No se puede crear o no existe un tipo de tecnología o marco en el lado del servidor que pueda reemplazar el javascript clásico al menos en esta generación .
PHP es un lenguaje de servidor utilizado para desarrollar programas backend. Desde los primeros días del desarrollo web, se han utilizado php y otros lenguajes (java, python, c#, ruby, etc.) para crear páginas web. En técnica, el lado del servidor es el responsable de crear el html, por lo que cuando el usuario ingresa a acme.com, el lado del servidor crea el html y lo devuelve con el contenido listo para mostrar.
En estos marcos, las bibliotecas de uso clásico son capaces de crear html como si fuera una cadena simple, usando plantillas.
<? if ($condition): ?> <p>Content</p> <? elseif ($other_condition): ?> <img src="other-content.png" alt=""/> <? else: ?> <script type="text/javascript"> document.write('<a><img src="$SOME_VAR.png"></a>'); </script> <? endif; ?>Como puede ver, en el servidor (php), simplemente crea html o javascript como cadenas simples. Al final, estos contenidos serán evaluados por el navegador web , y el navegador web solo entenderá html , javascript, css, fuentes, etc. Al navegador no le importa quién crea el html/javascript en el servidor (java, c#, php, python, rubí, etc.).
Básicamente es lo contrario a la ssr. El contenido se crea del lado del cliente publicitario, más específicamente del navegador web. Entonces, cuando el usuario ingresa a acme.com, el servidor solo devuelve un index.html mínimo y un gran archivo javascript. Este archivo javascript es responsable de representar o crear la página web completa usando javascript y ajax .
En esta capa, la tecnología (javascript) puede acceder a cierta información del dispositivo o recursos como la dimensión de la pantalla, la cámara, etc. No puede obtener estos valores en la capa del lado del servidor (php, java, c #, etc.)
Más detalles aquí
PHP no sabe nada sobre el tamaño de la pantalla de un cliente. La mejor solución sería JavaScript que cambia el contenido según el tamaño de la pantalla.
Con un elemento <picture> puede usar Media Queries para determinar qué imágenes mostrar en función del tamaño de la pantalla.
En el siguiente ejemplo, mobile.png se mostrará para pantallas de hasta 720 px de ancho, y la imagen desktop.png se mostrará para todos los tamaños por encima.
<a id="dynamic-link" href=""> <picture> <source srcset="mobile.png" media="(max-width: 720px)"> <img src="desktop.png" alt=""/> </picture> </a> La etiqueta de anclaje no tiene este tipo de funcionalidad. Pero podemos agregarlo usando window.matchMedia() y usar la misma Media Query para cambiar el valor href del ancla siempre que cambie el tamaño de la pantalla.
// Select the link element. const dynamicLink = document.getElementById('dynamic-link'); // If the link exists on the page, continue. if (dynamicLink !== null) { // Observe a media query. const mediaQuery = window.matchMedia('(max-width: 720px)'); mediaQuery.addEventListener('change', event => { // If the screen in 720px or less. if (event.matches) { dynamicLink.href = 'http://example.com/mobile'; // All sizes above. } else { dynamicLink.href = 'http://example.com/desktop'; } }); }