Banner che cambia su base responsive

[Gas75]

Salve, sto aggiornando un mio sito che visualizza codice esterno (banner pubblicitario) e, rendendo le pagine responsive, tale codice resta "rigido" e quindi rovina la visibilità da smartphone.
Avrei una soluzione CSS giocando sui valori block e none dell'attributo display associato a due div alternativi, ma il fornitore dei codici vieta il loro uso nascosto (o comunque con visibilità gestita lato client). Mi è stato suggerito di lavorare in PHP con questo comando

$_SERVER['HTTP_USER_AGENT'] 

Problema è che non so come fare a utilizzarlo...

A me servirebbe una cosa con una logica banale:
- se la pagina è visualizzata da smartphone elabora il codice 2.
- viceversa elabora il codice 1.

[piesse78]

Ciao, ti conviene usare una libreria già fatta che lo faccia per te, perchè, analizzare lo user-agent non è mai banale. Ad esempio:
http://mobiledetect.net/

se guardi gli esempi l'utilizzo è semplice:

if ( $detect->isMobile() ) {
...

[Gas75]

Grazie, nel frattempo avevo quasi risolto mettendo assieme un po' di codice io... Resta un problema: via PHP riconosce il dispositivo ma ignora la risoluzione (cosa che gestirei facilmente con le media query di CSS) per cui su un eventuale monitor con risoluzione antidiluviana (ammesso che ce ne siano, parliamo di risoluzioni inferiori a 1024x768...) visualizza logicamente il banner grande che esce dalla finestra visibile...

[Webbabe]

Il codice lato server non funzionerà, è necessario aggiornarlo in modo dinamico se un visitatore modifica le dimensioni della finestra del browser.


Dovresti solo usare css @media rules e viewport per dimensionare il contenuto in modo dinamico in base alle dimensioni dello schermo.

e.s. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Gas75]

Hai letto il messaggio di apertura? Lo staff che fornisce quei banner pubblicitari dice che

il codice deve essere erogato lato server: non puoi modificare il sorgente dei banner o nasconderli lato client.

[Webbabe]

Sì, ho letto, ma non funzionerà, il codice lato server viene elaborato prima che la pagina venga caricata (a meno che non si usi ajax) e quindi non è possibile tenere in considerazione le dimensioni dello schermo cambiando dopo il caricamento della pagina.


Utilizzando le regole di css @media, dovresti essere in grado di caricare la dimensione dell'annuncio corretta in modo dinamico a seconda delle dimensioni dello schermo, modificando l'img src e le dimensioni con diverse dimensioni di visualizzazione o modificando le dimensioni. Presumo che la tua compagnia pubblicitaria di banner ti permetta di scegliere tra una selezione di dimensioni e forme di banner standard, basta scegliere la migliore per la dimensione dello schermo, non conosco nessuna società pubblicitaria che preferirebbe che le loro pubblicità non fossero visualizzate in base alla dimensione dello schermo.

[Webbabe]

<picture>
<sourcemedia="(min-width: 900px)"srcset="BigImage.png">
<sourcemedia="(min-width: 480px)"srcset="MediumImage.png">
<imgsrc="OtherImage.png"alt="IfItDoesntMatchAnyMedia">
</picture>

[Gas75]

Devo sottostare a delle regole, tra cui che non posso manipolare i codici dei banner né ridimensionarne/scalarne la visualizzazione, pena la cancellazione dell'account pubblicitario.
In sostanza se io metto i codici di due loro banner diversi e lascio che sia il client (css) a scegliere il più idoneo per una certa visualizzazione, ne vado a nascondere l'altro; viceversa con PHP, una volta lanciata l'interrogazione sul tipo di dispositivo, la pagina web viene caricata (dici benissimo, viene caricata dopo!) con un solo banner a codice, cioè se l'utente apre il sorgente vede solo il codice di un banner pubblicitario, e al fornitore dei banner vuole così e anzi ha approvato la mia funzione PHP, basandosi sulla sola analisi del dispositivo e non della risoluzione. Comunque le pagine del sito utilizzano senza restrizioni il viewport, come hai giustamente suggerito.

Ho comunque segnalato il problema rilevato, proprio modificando manualmente la larghezza della finestra e simulando le varie risoluzioni in maniera continua, con risoluzioni larghe circa 1000 pixel, e attendo un aggiornamento.

[Gas75]

<picture>
<sourcemedia="(min-width: 900px)"srcset="BigImage.png">
<sourcemedia="(min-width: 480px)"srcset="MediumImage.png">
<imgsrc="OtherImage.png"alt="IfItDoesntMatchAnyMedia">
</picture>

I codici dei banner non puntano a file di immagini png, jpg o altro, ma a dei loro file di JavaScript cui passo un id del mio account... E per ogni formato di banner cambia il JS.