Grid CSS de Primefaces no se adapta a dispositivos móviles

Pregunta enviada por un seguidor

Hola, estoy desarrollando una aplicación con JSF 2.3 + Primefaces 7. La cuestión es la siguiente, estoy usando el Grid CSS de Primefaces para hacer la aplicación responsive. Cuando voy cambiando el ancho del Browser se ven reflejado los cambios y la aplicación se va adaptando, pero cuando pongo F12 y le doy clic en el toggle device toolbar de Google Chrome para hacer una simulación en dispositivos móviles, este no cambia nada y solo se va haciendo -zoom y +zoom sin reflejar el diseño responsive. ¿Por qué? Estoy usando el Grid CSS de Primefaces y siguiendo la documentación. ¿Faltará alguna configuración adicional o activar algo? Como les digo, funciona cuando cambio la pantalla del browser, pero cuando quiero simular con F12 (toggle device toolbar) no pasa nada y también ya lo probé desde un celular y lo mismo. ¿O es que así de simple no es y hay que hacer otra cosa? Muchas gracias.

https://www.primefaces.org/showcase/ui/panel/grid.xhtml

https://www.primefaces.org/showcase/ui/misc/responsive.xhtml

<div class="ui-g">

<div class="ui-g-4">4</div>

<div class="ui-g-4">4</div>

<div class="ui-g-4">4</div>

</div>

Post publicado en el grupo

https://www.facebook.com/photo?fbid=153021783151903&set=gm.1510865319301186

Capturas de pantalla

Solución

Se debe agregar el siguiente meta a la plantilla principal de la aplicación: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

De esta manera, el Grid CSS funcionará en cualquier dispositivo (computador, tablet, móvil)