Il componente Dialog di jQuery UI è un potete strumento per gestire pop up dinamici all’interno delle nostre pagine web.
Nonostante questa libreria non sia quella più indirizzata al mobile (vedi jQuery Mobile), essa permette comunque di utilizzare i propri componenti anche nei più svariati tablet e smartphone in commercio senza grossi problemi di integrazione.
Restando in tema mobile viene facile pensare ai tag HTML dedicati a questi dispositivi; uno tra tutti <meta name="viewport" />. Esso permette di impedire all’utente di zoomare la pagina web e di modificare la dimensione della pagina per adattarla al meglio allo schermo.Ed è proprio qui che jQuery UI e viewport non riescono a convivere pacificamente assieme: l’aggiunta del contenuto width=device-width impedisce al Dialog di centrarsi nella pagina o, cosa ancora peggiore, di uscirne dai confini.
Per risolvere il tutto sarà sufficiante rimuovere width=device-width dal viewport.