Điều này có nghĩa khi vào bằng pc sẽ khác khi vào bằng mobile và lợi ích có thể thấy rõ là trên trang dành cho pc ta có thể bố trí các script, quảng cáo, popup,... còn trang dành cho mobile thì làm đơn giản để tiết kiệm dung lượng khi duyệt.
Nào bắt đầu:
-Với HTML
Tạo 3 trang có tên như sau và nhớ là thiết kế 3 trang này cho ổn đã nhé:
tentrang _web. html (dành cho web hay pc)
tentrang _mobile. html (dành cho điện thoại)
tentrang _touch. html (dànhcho iphone /ipad v.v..)
Thêm mã này vào trang wap của bạn (có thể là trang INDEX hoặc gì tùy bạn):
<xt:include file="/đường dẫn đến trang của bạn/tentrang_<xt id="get_device_template" />. html ">
Khi vào bằng các thiết bị khác nhau nó sẽ tự chuyển về trang tương ứng cho thiết bị đó.
-Với CSS :
Tạo 3 giao diện CSS với 3tên như sau, thiết kế giao diện và lưu lại vào 1chỗ nào đó trên wap (tốt nhất lưu ở thư mục gốc cho nó tiện lợi):
web. css
mobile. css
touch. css
Tạo tệp "_headtags" và thêm cái mã này vào:
<link rel="stylesheet" type="text/ css " href="/<xt:get_device_template/>. css ">
Vậy là khi vào bằng các thiết bị khác nhau thì giao diện khác nhau. Ví dụ: http://ngbaanh.wap.sh Khi bạn vào bằng đt thì giao diện đơn giản, còn khi vào bằng pc thì giao diện sẽ có rất nhiều hình ảnh và hiệu ứng.