Ciao a tutti,
sto finendo di sistemare un sito wordpress. Il problema è questo: se provo ad ingrandire testo e contenuti su iPad e tablet in generale (col classico sistema di divaricare le dita) non succede nulla. I contenuti sono come "bloccati". La stessa operazione fatta su uno smartphone invece funziona perfettamente. Non riesco a capite dove stia il problema.

Il sito è questo: www.vivivenezia.net
I css riguardante la parte @media sono questi, copio e incollo dall'editor di wordpress del mio tema (Everest per la cronaca):

/* =============================== RESPONSIVE STYLES ============================ */

/*----------------------------------768-999 Width---------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 999px) {
.global-wrapper {
width:768px;
}

.error-404 {
font-size:15em;
}

}

/*----------------------------------480-767 Width---------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
.global-wrapper {
width:480px;
}

.one-fourth{
width:48%!important;
display:inline-block;
}

ul.gallery li {
width:46.16%!important;
}

ul.posts {
width:104%;
}

ul.posts li {
float:left;
width:47%!important;
margin-right:3%;
}

.error-404 {
font-size:9em;
}
}

/*------------------------------------0-767 Width---------------------------------*/

@media only screen and (max-width: 767px) {

.content,
.sidebar {
float:none;
width:auto!important;

}

.content,
.sidebar {
padding: 3em 30px 0 30px!important;
}

.alignleft,
.alignright {
float:none;
clear:both;
margin:0 0 1em 0;
}

.logo {
float:none;
width:100%;
text-align:center;
margin-bottom:0.5em;
}

.logo img {
display:inline!important;
}

.menu-container .menu{
display:none;
}

.select-menu {
display:block;
}

.header .widget-container {
text-align:center;
clear:left;
float:none;
}

.header .widget-social a {
display:inline-block;
float:none;
}

.one-third,
.two-third,
.three-fourth,
.footer-widgets .widget-container,
.gallery-details .description,
.gallery-details .gallery-slider-wrapper {
width:100%!important;
margin-right:0;
margin-left:0;
}

.gallery-details {
margin-bottom:2em;
}

ul.filter li a{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right:3px;
margin-bottom:3px;
}

.comment-form {
width:100%;
}

.horizontal-tabs ul.tabs li{
float:none;
clear:both;
border:1px solid #ccc;
margin-bottom:-1px;
}

.horizontal-tabs ul.tabs li.active {
margin-top:0;
padding-bottom:0.5em;
}

.vertical-tabs ul.tabs ,
.vertical-tabs .panes{
float:none;
width:auto;
}

.vertical-tabs ul.tabs {
margin-bottom:1em;
}

.footer-widgets .widget-container {
margin-bottom:1em;
}
}

/*-----------------------------------0-479 Width---------------------------------*/

@media only screen and (max-width: 479px) {
.global-wrapper {
width:320px;
}

.column{
width:100%!important;
}

ul.gallery li {
width:97%!important;
}

.comment-list ol li ul {
padding:1em 0 0 0;
margin:0;
}

.post-meta {
padding:0.5em 0;
}

.post-meta span, .post-meta a.comments {
clear:both;
display:block;
float:none!important;
}

.error-404 {
font-size:12em;
}

Non sono un grande esperto di css quindi non riesco a capire quale istruzione devo modificare e/o aggiungere per poter ingrandire le dimensioni dei contenuti utilizando la semplice apertura delle dita. Come solitamente succedere in tutti gli altri siti.

Grazie infinite a chiunque riesca ad aiutarmi.