[Magento] - cách kiểm tra màn hình mobile hay desktop trong magento

Sử dụng CSS Media Query:

1. Mở file CSS của giao diện bạn đang sử dụng trong Magento.

2. Thêm các media query để tạo điều kiện cho các thiết bị khác nhau:

/* Thiết lập cho mobile */
@media (max-width: 767px) {
    /* Đặt các CSS rules cho mobile ở đây */
}

/* Thiết lập cho desktop */
@media (min-width: 768px) {
    /* Đặt các CSS rules cho desktop ở đây */
}

Với cách này, bạn có thể tùy chỉnh giao diện trang web của bạn dựa trên kích thước màn hình.

Sử dụng JavaScript:

1. Trong file JavaScript của trang web Magento, bạn có thể sử dụng đoạn mã sau để kiểm tra kích thước màn hình và thêm class vào thẻ để đánh dấu là mobile hay desktop:

if (window.innerWidth <= 767) {
    document.body.classList.add('mobile');
} else {
    document.body.classList.add('desktop');
}

Sau đó, bạn có thể sử dụng các CSS rules cụ thể cho từng trường hợp.

Sử dụng Magento's JavaScript:

Magento cung cấp cảm biến kích thước màn hình thông qua đối tượng responsive có sẵn trong JavaScript. Dưới đây là ví dụ cách bạn có thể sử dụng nó:

require(['jquery', 'Magento_Theme/js/responsive'], function($, responsive) {
    if (responsive.mobile) {
        // Xử lý cho mobile
    } else {
        // Xử lý cho desktop
    }
});

Lưu ý rằng cách tiếp cận này có thể thay đổi tùy theo phiên bản cụ thể của Magento bạn đang sử dụng. Hãy kiểm tra tài liệu chính thức hoặc tìm hiểu trong tài liệu hướng dẫn của phiên bản Magento của bạn để biết thêm chi tiết.