10/10/2018, 13:34

phát triển ứng dụng web chạy cả trên mobile và trên desktop ?

- Em đang chuẩn bị code 1 website chạy cả trên mobile và trên desktop. Em sử dụng codeigniter framework để phát triển site này. Vấn đề hiện tại là chưa hề có 1 chút kinh nghiệm nào về web trên mobile đồng thời phát triển web mobile trên CI.

- ý tưởng của em thế này, em trình bày sơ qua để các bác có thể hiểu được.

+) Về phần giao diện. Em đã tham khảo trang vnexpress trên desktop và trên mobile. Cho nên em cũng tạo 2 giao diện tương ứng cho project của em chạy trên mobile và trên desktop.

+) Về source để phát triển, em sử dụng framework codeigniter.

- Còn đây là phần ý tưởng phát triển của em. Em trình bày sơ qua như sau để các bác hiểu:

+)trong thư mục application em tạo 2 app. 1 app cho mobile 1 app cho desktop. Mỗi controller trong app này đều kế thừa từ 1 controller Base, base này sẽ load thư viện user_agent dùng để detect ra device. Nếu device là desktop thì nó sẽ redirect sang app desktop, tương ứng như vậy dành cho mobile, và từ các app tương ứng được gọi nó sẽ gọi các model và view tương ứng. phần backend( quản trị ) em để dùng chung.


- Nhưng có mấy vấn đề mà em chưa hiểu, đó là :
+) giao diện, hình ảnh chạy trên mobile nó có vỡ ra ko ? (vì mình dùng chung phần backend mà)
+) Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.
+)Giao diện web có tương thích với từng hệ điều hành mobile như : android,iphone OS... hay ko ?


- Nhờ các bác đi trước đã có kinh nghiệm tư vấn, hướng dẫn em .
-Cám ơn các bác đã đọc bài của em.
mucor viết 2 tuần trước
Được gửi bởi chieftain2t
Mỗi website vừa chạy trên mobile họ đều có subdomain kiểu như : m.vnexpress.net, m.dantri.com.vn, m.cnn.com. Vậy làm thế nào để nó tự động redirect sang tên miền m.vidu.com khi mà người dùng đang chạy trên mobile.
Tôi thường dùng như sau:
+ Với mỗi trang, sinh url tương ứng cho mobile
+ Chèn đoạn javascript sau vào đầu mỗi trang:

Code:
<script>
var MOBILE = '<url for mobile>';
(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera, MOBILE);
</script>
nhoemzx viết 2 tuần trước
Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.
nhoemzx viết 2 tuần trước
Mình cũng đang làm 1 vài projects với code igniter, nếu có hứng thú thì cho yahoo, khi nào rảnh hay có vấn đề gì thì trao đổi.
zmt264 viết 2 tuần trước
Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).
nholoiemnoi viết 2 tuần trước
cái này cũng không khó lắm. có thể sử dụng link hoạt css, hoặc một vài thủ thuật khác, bạn search là ra nhiều tài liệu cho bạn lắm
nhoemzx viết 2 tuần trước
Được gửi bởi zmt264
Vấn đề này có 1 cách giải quyết khác, hiện đại, khác truyền thống xưa nay là dùng Responsive Web Design, để minh họa bạn có thể vào http://smashingmagazine.com bằng cả máy tính và mobile rồi xem sự thay đổi về giao diện (trong khi URL và thậm chí có thể cả response là giống nhau).
Thì Bootstrap có responsive design nữa mà, các bạn có thể rezie (thu hẹp chiều rộng) thì sẽ thấy nó tự điều chỉnh.
zmt264 viết 2 tuần trước
Được gửi bởi nhoemzx
Bạn chỉ cần views tương ứng cho từng app (desktop và mobile) vì Model-Controller không thực sự liên quan đến giao diện người dùng. Bạn cũng có thể tham khảo "twitter chấm github chấm com/bootstrap/" và giao diện người dùng. Cái này bạn chỉ cần làm 1 app nhưng tùy thộc vào độ phân giải thì nó sẽ tự điều chỉnh application của mình. (1 Số smartphone, vào desktop page còn dễ hơn và tiện hơn là vào mobile site). Ở trong code igniter, ở trong constructor, cậu cho code kiểm tra thiết và redirect đến trang tương ứng.
ok, http://twitter.github.com/bootstrap/ là một trong các CSS Framework hỗ trợ Responsive Web Design.
dammio viết 2 tuần trước
Bây h thì dùng Bootstrap khỏe rồi, http://www.dammio.com/bootstrap-co-ban/
Bài liên quan

Tại sao cách làm tương tự nhau lại cho ra kết quả khác nhau?

/*Cách 1*/ $db= new PDO("mysql:host=localhost;dbname=name", 'root', '); //$db->query('set names "utf8"'); $var1 = 1; $var2 = 2; $sql = "SELECT * FROM theloai LIMIT ?,?"; $cursor = $db->prepare($sql); $cursor->bindParam(1,$var1); $cursor->bindParam(2,$var2); $cursor->execute(); e ...

Đinh Công Mạnh viết 3 tuần trước

Xin phần mềm chuyển từ file .chm sang word

mình có tải một quyển ebook trên mạng bây giờ muốn chuyển sang world để định dạng lại một chút rồi in ra thành sách đọc cho dễ mà không biết phần mềm nào . ai có share cho mình với

Nhóc Lãng Tử viết 3 tuần trước

How to login in android

How to login in android with url json

Nguyễn Thị Thùy viết 3 tuần trước

Anh em Dạy nhau học có ai tham gia Imagine Cup 2016 không?

Imagine Cup thì chắc hẳn ai cũng biết, không biết năm nay có ai tham gia để kiếm giải thưởng không? Thiết nghĩ, nếu có 1 team xuất phát từ Dạy nhau học chắc hay lắm đây Giải thưởng bao gồm: Giải nhất: 50.000 USD Giải nhì: 10.000 USD Giải ba: 5.000 USD Ngoài ra: còn có Balo Microsoft, Áo ...

Ninh Lê viết 3 tuần trước

Không lấy được bản đồ khi dùng Google map trên android

Hôm nay mình lại bị cái lỗi này, mình chạy chương trình bình thường nhưng lại không hiện được bản đồ, mình coi lại LogCat thì thấy nó báo lỗi lạ quá, mọi người sửa giúp mình với google map Android 1.png 1366x768 192 KB google map Android 2.png 1366x768 217 KB

Phúc Nguyễn viết 3 tuần trước
0