» Tổng Hợp các cách AUTO Wap/Web cho WAPKA chi tiết |  Pham_loi
 Chức vụ:
05:53:03, 26-03-2016 |
Bài này sẽ dành cho những ai đam mê và hứng thú với WAPKA. Là 1 trong những WapBuilder khá lâu đời, sever ổn và hiện nay được hỗ trợ khá tốt từ những nhóm làm Wapka nên ai thích thì cứ chiến thoải mái. Hiện nay AUTO Wap/Web là một điều không thể thiếu giúp Google đánh giá trang của bạn tốt hơn. Các cách dưới đây mình tổng hợp lại những thứ mà mình biết về auto wap web cho wapka, nếu bạn nào có cách nào khác hơn vui lòng comment bên dưới để mình bổ sung.
1. Auto Wap Web bằng javascript theo độ rộng màn hình
Cách dùng: thay đổi giá trị w>=1000. Ví dụ bạn muốn những màn hình có độ rộng lớn hơn 1000px sẽ hiển thị code cho web thì bạn bọc xung quanh những code mà bạn muốn hiển thị bằng class web
Ví dụ
<div>những code bạn muốn web hiển thị</a>
<div>những code bạn muốn wap hiển thị</a>
- Coppy js bên dưới dán vào head hoặc top của trang wapka bạn:
<script type="text/javascript"> var w=window.innerWidth; if(w>=1000){document.write('<style type="text/css">.wap{display:none;}</style>');} else{document.write('<style type="text/css">.web{display:none;}</style>');}</script>
Copy code
Copy code
2. Auto Wap Web bằng công cụ sẵn của Wapka
Đầu tiên tìm 1 giao diện web cho wap
Vào site -1 để add css nhé -1 > add css vào > ok , edit site > users >Items visibility > tìm cái css mình vừa add bên cạnh có dòng "[A N L X(g c t l p u)" thì click "g c t l p u" > chọn "Cell phone" > cái này là css cho PC nên chọn như sau
Display item, if user is not using selected cell phone*:" > add vào ô 2 là các browser của điện thoại vì khi xài điện thoại thì sẽ ko hiện ra css này còn PC thì ngược lại.
Opera Mini; SonyEricsson; Nokia; Maui Wap Browser; LG; UC; Motorola; Q Mobile; Iphone; Ipad; Ipod; Blackberry
Copy code
Copy code
và cái css còn lại cho mobile thì các bước như trên nhưng chọn "is using" và vẫn add mấy browser kia vào.
Thế là xong! cái nào bạn muốn hiện khi xài PC thì làm cách giống như css cho PC. Còn cái nào muốn xài điện thoại hiện thì làm giống cách css mobile.
3. Auto Wap Web bằng javascript nhận diện trình duyệt
Dán vào Head hoặc top
<script type="text/javascript">{document.write("<script type="text/javascript">if("+navigator.appName+"=="Internet exeroler"|| "+navigator.appName+"=="Mozilla Firefox" ||"+navigator.appName+"=="Google Chrome"||"+navigator.appName+"=="Opera"||"+navigator.appName+"=="Sarafi"){document.write("link css dành cho pc");}else{document.write("link css cho điện thoại");}</script><noscript>link css cho dòng không hỗ trợ javascript</noscript>")};</script>
Copy code
Copy code
4. Auto Wap Web bằng CSS (Reponsive)
Cái này cũng không mới hiện nay đang rất thịnh hành (Hãy tìm hiểu khái niệm Reponsive CSS)
CSS này sẽ có tác dụng tương tự như số 1 là theo độ rộng màn hình. Lợi ích sẽ tăng khả năng load trang và tương thích trên nhiều thiết bị. Hơn nữa loại này các bạn có thể tùy chỉnh css ở nhiều độ rộng khác nhau với nhiều dạng css khác nhau
Dưới đây là đoạn css giúp reponsive
@media only screen and (min-width: 1024px) {
/* CSS cho máy tính */
.css1 {}
.css2 {}
}
@media only screen and (min-width: 768px) {
/* CSS cho máy tính bảng */
.css1 {}
.css2 {}
}
@media only screen and (max-width: 768px) {
/* CSS cho di động */
.css1 {}
.css2 {}
}
Copy code
/* CSS cho máy tính */
.css1 {}
.css2 {}
}
@media only screen and (min-width: 768px) {
/* CSS cho máy tính bảng */
.css1 {}
.css2 {}
}
@media only screen and (max-width: 768px) {
/* CSS cho di động */
.css1 {}
.css2 {}
}
Copy code
Bên trên chỉ là ví dụ thôi các bạn có thể tùy biến nhiều hơn nữa
Chúc các bạn thành công. Nếu có gì không hiểu vui lòng comment bên dưới để được hỗ trợ
Chỉnh sửa lúc 2016-03-26 06:03 bởi Pham_loi
:
0 ♥