Julkaisijavinkit: Tagit responsiiviselle sivulle

Kuva: Crew

Improve Median ohjeistus mainostagien asentamisesta responsiiviselle sivustolle on muuttunut

Kun sivustolla käytetään desktop- ja mobiilimainostageja, tulee varmistaa, että pieninäyttöisissä mobiililaitteissa näkyvät vain mobiilikoon mainokset. Tässä tulee huomioida seuraavat asiat:

  1. Sivun <head>-parametrin sisään tulee sijoittaa viewport-määrittely:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Jos samalla mainospaikalla näytetään desktop- ja mobiilimainos, ajetaan skripti, joka valitsee ikkunan koon mukaan kumpi mainos näytetään:
    <script type="text/javascript">
    if(window.innerWidth > 1019) {
    // TÄHÄN DESKTOP-MAINOKSEN KOODI
    } else {
    // TÄHÄN MOBIILI-MAINOKSEN KOODI
    }
    </script>

HUOM! Mainospaikan näkymistä EI SAA määritellä CSS:n @media-säännöillä, koska tällöin molemmat mainokset latautuvat, vaikka vain toinen näkyy sivulla.

Ota meihin yhteyttä, mikäli tarvitset lisäohjeita.