Zittme agregó la opción responsiva a las dos vías existentes, PC y móvil. Este documento cubre dos cosas: la vista responsiva, en la que el sitio cambia su comportamiento según el ancho de pantalla, y la marca responsiva, con la que los autores declaran que su skin o layout es responsivo.

Qué es la vista responsiva

El motor anterior decidía entre PC y móvil según el tipo de dispositivo (si es un celular o no). La vista responsiva decide, en cambio, según el ancho de pantalla.

• Usa un solo skin (el marcado para PC) tal cual,
• y cuando el ancho de pantalla baja a 768px o menos, el motor aplica los ajustes del lado móvil: ajustes del editor, número de elementos de la lista, número de páginas de la paginación y textos de encabezado/pie.

Es decir, sin crear un skin móvil aparte, los ajustes adecuados para pantallas angostas se aplican solos. Es una función experimental y está desactivada de forma predeterminada.

El ancho de referencia es 768px (Mobile::NARROW_BREAKPOINT, BREAKPOINT en common/js/responsive-view.js). Tu skin puede usar otros puntos de corte, pero debes saber que en este límite cambian los ajustes del motor.

Marca responsiva: para autores de skins y layouts

Por qué hace falta una marca

Antes, la carpeta era la distinción: skins/ para PC y m.skins/ solo para móvil. Pero un skin responsivo no es algo distinto de un skin para PC, sino una propiedad: "este skin también funciona en pantallas angostas". Por eso se indica en los metadatos, no con la carpeta.

Cómo marcarlo

Agrega una línea al inicio de skin.xml en los skins, o de conf/info.xml en los layouts.

<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 스킨</title>
	...
</skin>

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
	<responsive>true</responsive>
	<title xml:lang="ko">내 레이아웃</title>
	...
</layout>

Se considera responsivo si el valor es true, y o 1 (sin distinguir mayúsculas y minúsculas). Si no hay valor o es otro, no es responsivo.

El valor predeterminado es "no responsivo"

Todos los skins existentes sin la marca se consideran no responsivos. Si tu skin ya es responsivo, solo agrega la línea <responsive>true</responsive>; no necesitas cambiar nada más.

Qué significa declarar true

• Un solo marcado y CSS cubren pantallas anchas y angostas. En pantallas angostas no debe aparecer desplazamiento horizontal ni recortarse elementos.
• Debes diseñarlo suponiendo que en pantallas angostas pueden aplicarse los ajustes móviles (editor, número de elementos, paginación, encabezado/pie).
• Si es un layout, su forma debe adaptarse en pantallas angostas, por ejemplo plegando el menú.

Dónde usa el motor este valor

• Pantalla de selección de skin y layout: agrega una insignia a los responsivos.
• Cambio de modo de vista: si cambias a la vista responsiva y el skin elegido no es responsivo, muestra una advertencia. No lo impide.
• Validación de paquetes de tema: en un tema declarado responsivo, todos los skins y layouts que lo componen deben ser responsivos. (Consulta Crear un paquete de tema)

Comprobarlo en el código

$skin_info = ModuleModel::loadSkinInfo($module_path, $skin_name);
if ($skin_info->responsive)
{
    // 반응형 스킨
}

Compatibilidad

• Los skins existentes funcionan igual. Si no hay valor, simplemente es false y nada se rompe.
• No hay problema al instalar en Rhymix un skin con <responsive>: el motor ignora los elementos que no conoce.
• Esta marca es propia de Zittme y no existe en Rhymix original (upstream).