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.