Chuyển đổi giao diện wap/web khi truy cập từ Mobile hoặc PC
Xtgem hỗ trợ tự động phát hiện khách truy cập đang dùng thiết bị gì
Code:
[red]<xt:get_device_template />[/red]
Có 3 trường hợp:
- mobile : Nếu người dùng sử dụng điện thoại hoặc các thiết
bị cầm tay thông thường
- web : Người dùng truy cập từ PC
-touch : Người dùng sử dụng cácdòng máy đời rất cao Iphone, Galaxy hoặc Ipad
Qua đó chúng ta có thể tạo ra code thay đổi giao diện phù
hợp với các thiết bị trên.
- Bạn cần viết 3 css cho 3 loại giao diện. Đặt tên như sau: css
cho mobile (wap) đặt tên là mobile.css, css cho pc web.css, css cho touch touch.css (touch rất hiếm nên ko cần quan tâm nhé! sau đây HD Auto wap/web). Chưa đủ trình viết css có thể lấy của wap khác
- Tiếp theo bạn cần chèn code put css này vào _headtags hoặc chèn vào file bạn muốn thay đổi giao diện. Nhớ bỏ css
đang dùng đi nhé.
Code:
<link rel="stylesheet"
type="text/css" href="/thư_mục_chứa_css/<xt:get_device_template />.css" />
Ví dụ bạn đặt các file css trên trong thư mục my-style thì
code là:
<link rel="stylesheet"
type="text/css" href="/my-style/<xt:get_device_template />.css" />
Tiếp theo để có thể chuyển đổi giao diện bạn cần 3 file html ở đây mình ví dụ với
index (trang chủ) bạn cần tạo 3 file
(index, index_mobile,
index_web)
- index_mobile : bạn thiết kế giaodiện wap cho mobile
- index_web : giao diện web cho PC
- index : Tắt _header và _footer đinhé chèn code này vào:
<xt:include file="index_<xt:get_device_template />">
Các file khác làm tương tự.
Chúc thành công
Dưới đây phương pháp tương tự
Đề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ành cho 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 đếntrang 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 3 tên nhưsau, thiết kế giao diện và lưu lại vào 1 chỗ 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áimã 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.
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 khác nhau
