Zittme bổ sung đáp ứng (responsive) vào hai nhánh PC / di động vốn có. Tài liệu này đề cập hai nội dung: chế độ xem đáp ứng, trong đó website thay đổi hành vi theo độ rộng màn hình, và hiển thị đáp ứng, nơi người tạo khai báo skin, layout của mình là đáp ứng.

Chế độ xem đáp ứng là gì

Engine trước đây phân biệt PC/di động theo loại thiết bị (có phải điện thoại hay không). Chế độ xem đáp ứng thay vào đó phân biệt theo độ rộng màn hình.

• Vẫn dùng nguyên một skin (markup dành cho PC),
• Khi độ rộng màn hình hẹp xuống 768px trở xuống, engine áp dụng các giá trị cài đặt phía di động: cài đặt trình soạn thảo, số mục trong danh sách, số trang phân trang, văn bản header/footer.

Nghĩa là không cần làm riêng skin di động, các cài đặt phù hợp với màn hình hẹp vẫn tự đi kèm. Đây là tính năng thử nghiệm và mặc định là tắt.

Độ rộng dùng để phân biệt là 768px (Mobile::NARROW_BREAKPOINT, BREAKPOINT trong common/js/responsive-view.js). Skin được tự do dùng điểm ngắt khác, nhưng bạn cần biết rằng tại ranh giới này các giá trị cài đặt của engine sẽ thay đổi.

Hiển thị đáp ứng: dành cho người tạo skin, layout

Vì sao cần khai báo

Trước đây, thư mục chính là cách phân loại: skins/ dành cho PC, m.skins/ chỉ dành cho di động. Nhưng skin đáp ứng không phải là một thứ tách biệt với skin PC, mà là một tính chất: "skin đó đảm nhận được cả màn hình hẹp". Vì vậy nó được ghi trong metadata chứ không phải thư mục.

Cách khai báo

Thêm một dòng ở đầu skin.xml đối với skin, và conf/info.xml đối với layout.

<?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>

Nếu là một trong true, y, 1 thì được coi là đáp ứng (không phân biệt hoa thường). Nếu không có giá trị hoặc là giá trị khác thì không phải đáp ứng.

Mặc định là "không đáp ứng"

Mọi skin hiện có không khai báo đều được coi là không đáp ứng. Nếu skin của bạn vốn đã làm theo kiểu đáp ứng, chỉ cần thêm một dòng <responsive>true</responsive>, ngoài ra không phải sửa gì.

Ý nghĩa của việc khai báo true

• Một bộ markup, CSS đảm nhận cả màn hình rộng lẫn màn hình hẹp. Trên màn hình hẹp không được xuất hiện thanh cuộn ngang hay phần tử bị cắt.
• Phải làm với tiền đề là trên màn hình hẹp có thể áp dụng các giá trị cài đặt di động (trình soạn thảo, số mục danh sách, phân trang, header/footer).
• Nếu là layout, hình thức phải thích ứng trên màn hình hẹp, chẳng hạn menu được thu gọn.

Nơi engine dùng giá trị này

• Màn hình chọn skin, layout: gắn huy hiệu cho những cái là đáp ứng.
• Đổi chế độ xem: nếu định chuyển sang chế độ xem đáp ứng mà skin đã chọn không phải đáp ứng thì sẽ cảnh báo. Không chặn.
• Kiểm tra gói giao diện: giao diện đã khai báo đáp ứng thì mọi skin, layout thành phần cũng phải là đáp ứng. (Xem Tạo gói giao diện)

Kiểm tra trong mã

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

Tương thích

• Skin hiện có vẫn hoạt động như cũ. Không có giá trị thì chỉ là false, không có gì bị hỏng.
• Cài skin có <responsive> vào Rhymix cũng không sao: engine bỏ qua các phần tử nó không biết.
• Khai báo này là riêng của Zittme, không có trong Rhymix upstream.