iao a tutti


sto sviluppando in html puro un sito.
Il problema è che inserendo in un div il codice di un banner reattivo di adsense il banner non si ridimensiona seguendo le media query.


Mi spiego meglio ...... il codice che utilizzo è il seguente:


codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htttp://vvv.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htttp://vvv.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Documento senza titolo</title><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"><script type="text/javascript"  src="htttp://vvv.mio-sito.it/js/respond.min.js"></script><script type="text/javascript"  src="htttp://vvv.mio-sito.it/js/modernizr-2.0.6.min.js"></script>	<script type="text/javascript"  src="htttp://vvv.mio-sito.it/js/jquery.min.js"></script><style type="text/css">.bannertop{width:320px;height:100px;}@media only screen and (min-width:768px){  .bannertop{width:300px;height:250px;}}</style></head>
<body>
<div class="bannertop"><script async srrc="/////pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- top-reattivo --><ins class="adsbygoogle"     style="display:block"     data-ad-client="ca-pub-1xxx43xxxxx"     data-ad-slot="5xxx2xxxx"     data-ad-format="auto"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div></body></html>

In base a questo codice visualizzando la pagina con uno smartphone dovrebbe essere erogato un banner 320x100.


Questo succede con tutti i browser per cellulari testati (chrome e altri) ma quando visualizzo la pagine con mozilla per android il banner assume le dimensioni 300x250 andando a coprire il testo della pagina.