Zittme adds responsive to the existing PC / mobile split. This document covers two things: the responsive view, where the site changes behavior based on screen width, and the responsive flag, where authors declare that their skin or layout is responsive.

What is the responsive view

The existing engine decided between PC and mobile by device type (is it a phone or not). The responsive view decides by screen width instead.

• It keeps using a single skin (PC markup) as is,
• and when the screen width narrows to 768px or less, the engine applies the mobile-side settings: editor settings, list count, pagination count, and header/footer text.

In other words, settings suited to narrow screens follow along without building a separate mobile skin. This is an experimental feature and is off by default.

The breakpoint width is 768px (Mobile::NARROW_BREAKPOINT, BREAKPOINT in common/js/responsive-view.js). Skins are free to use other breakpoints, but you should know that engine settings switch at this boundary.

Responsive flag: for skin and layout authors

Why a flag is needed

Previously, the folder was the distinction: skins/ for PC and m.skins/ for mobile only. But a responsive skin isn't a separate thing from a PC skin; it's a property meaning "this skin also handles narrow screens." So it's recorded in metadata, not by folder.

How to flag

Add one line at the top of skin.xml for skins, or conf/info.xml for 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>

Any of true, y, or 1 counts as responsive (case-insensitive). If the value is missing or anything else, it is not responsive.

The default is "not responsive"

All existing skins without the flag are treated as not responsive. If your skin is already built responsively, just add the single line <responsive>true</responsive>; nothing else needs changing.

What declaring true means

• One set of markup and CSS handles both wide and narrow screens. Narrow screens must not get horizontal scrolling or clipped elements.
• Build on the assumption that mobile settings (editor, list count, pagination, header/footer) may apply on narrow screens.
• For layouts, the shape must adapt on narrow screens, for example by collapsing the menu.

Where the engine uses this value

• Skin and layout selection screens: responsive ones get a badge.
• Changing the view mode: if you switch to the responsive view while the chosen skin isn't responsive, a warning appears. It doesn't block you.
• Theme package validation: a theme that declares itself responsive must have all component skins and layouts responsive. (See Building a theme package)

Checking in code

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

Compatibility

• Existing skins keep working. Without the value it's simply false, and nothing breaks.
• Installing a skin with <responsive> on Rhymix causes no problems: the engine ignores unknown elements.
• This flag is specific to Zittme and doesn't exist in upstream Rhymix.