Giúp em thiết kế website chạy trên điện thoại

[thanhit_humg]

Chào cả nha, các bác giúp em voi.
Em thiết kế xong wébite chạy trên pc rồi, nhưng khi truy cập bằng điện thoại thì nó không đẹp do độ phân giải màn hình khác, bây giờ em muốn thiết kế để mỗi khi người dùng truy cập vào bằng điện thoại thì giao diện sẽ đẹp hơn.
Các bác có thể giúp em để bây giờ làm sao em làm đc ko
Cảm ơn cả nhà

[saudom10]

đọ về responsive nhé

[bvnguyen]

có 2 phương án cho bạn:
- Thiết kế một giao diện mobile riêng, khi khách truy cập bằng điện thoại thì chuyển họ sang giao diện mobile, cách này thì dễ rồi.
- Thiết kế một giao diện phù hợp cả destop lẫn mobile, cái này hay và nhìn chuyên nghiệp hơn. Như bác trên đã nói, đó là responsive design. bạn có thể google cách sử dụng "css media queries" để tìm hiểu thêm.

[thanhit_humg]

có 2 phương án cho bạn:
- Thiết kế một giao diện mobile riêng, khi khách truy cập bằng điện thoại thì chuyển họ sang giao diện mobile, cách này thì dễ rồi.
- Thiết kế một giao diện phù hợp cả destop lẫn mobile, cái này hay và nhìn chuyên nghiệp hơn. Như bác trên đã nói, đó là responsive design. bạn có thể google cách sử dụng "css media queries" để tìm hiểu thêm.
Cảm ơn các bác đã giúp đỡ, khả năng là em làm theo các 1 là thiết kế giao diện mobi riêng
vậy các có thể giúp em hiểu rõ hơn 1 chút nữa được không vì em tìm trên mạng không có chỗ nào nói rõ cái này. Ví dụ bây giờ em làm 1 giao diện riêng cho website rồi, em đặt vào 1 folder của hosting rồi thì làm thế nào nữa, khai báo thế nào để nhận biết được là người dùng truy cập bằng mobi chứ không phải bằng pc.
Em có tham khảo nhiều website, họ thiết kế riêng website cho mobi và khi mình vào từ mobi thì nó có chữ "m" đứng đằng trước link. Các bác cho em hỏi là làm sao để có chữ "m" đấy được
Mong các bác giúp đỡ nhiệt tình.
Cảm ơn các bác nhiều

[bvnguyen]

Bác có thể sử dụng cái này:
http://detectmobilebrowsers.com/
Vào đó chọn ngôn ngữ của website bác đang chạy, ví dụ php, asp

[thanhit_humg]

Anh ơi anh có thể nói rõ cho em 1 chút nữa được không, em vào và download ngôn ngữ em sử dụng về rồi, nhưng chả biết là sao nữa
Bác giúp em với

[bvnguyen]

tải về bạn xem code chưa?
Ví dụ php, bạn tải về, tìm đoạn cuối:
header('Location: http://detectmobilebrowser.com/mobile');
Thay cái url bằng url của trang mobile bạn muốn chuyển đến.
copy code vào file index của domain chính

[b.adung]

có 2 phương án cho bạn:
- Thiết kế một giao diện mobile riêng, khi khách truy cập bằng điện thoại thì chuyển họ sang giao diện mobile, cách này thì dễ rồi.
- Thiết kế một giao diện phù hợp cả destop lẫn mobile, cái này hay và nhìn chuyên nghiệp hơn. Như bác trên đã nói, đó là responsive design. bạn có thể google cách sử dụng "css media queries" để tìm hiểu thêm.

Mô tả kỹ hơn cách của bạn này:

- Responsive web design: Phải làm từ khâu thiết kế đến phần làm CSS.
- Dùng 1 core nhưng mà có 2 template (1 cho web, 1 cho mobi). Dùng 1 đoạn code check đầu vào là web hay mobi thì cho dùng template tương ứng.

[chotphatmothaha]

cảm ơn vì bài viết hay

[thanhit_humg]

tải về bạn xem code chưa?
Ví dụ php, bạn tải về, tìm đoạn cuối:
header('Location: .............................)
Thay cái url bằng url của trang mobile bạn muốn chuyển đến.
copy code vào file index của domain chính
Anh ơi sao em làm hệt cách của anh, nhưng website không tự chuyển đến khi vào bằng mobile mà nó báo lỗi là "cannot modify header infomation..." cả một đoạn dài nữa.
Anh giúp em với, em không biết kêu ai đây.
Cảm ơn bác nhiều

[thanhit_humg]

Mô tả kỹ hơn cách của bạn này
- Responsive web design: Phải làm từ khâu thiết kế đến phần làm CSS
- Dùng 1 core nhưng mà có 2 template (1 cho web, 1 cho mobi). Dùng 1 đoạn code check đầu vào là web hay mobi thì cho dùng template tương ứng
Bác ơi làm sao để check được đầu vào là web hay là mobi, và nếu check được rồi thì chuyển nó đến thế nào, anh nói rõ cho em được không, em gà mong các bác giúp đỡ
Cảm ơn anh nhiều, nếu được nhờ anh code cho em một đoạn để kiểm tra và chuyển đến web mobile thì tốt
Cảm ơn anh

[bvnguyen]

Có phải lỗi này không:
Warning: Cannot modify header information - headers already sent by ...
Copy code trên vào đầu file index, trước nó không có dòng code nào cả, nếu vẫn bị, là do bạn lưu cả ký tự BOM, sử dụng notepad++ chọn Utf8 without BOM là được.

Code trên là code check mobi hoàn chỉnh rồi đó bạn, nó sẽ tự check và chuyển đến web mobile

[thanhit_humg]

Cảm ơn bác nhiều, em làm được rồi, mong là được bác chỉ giáo nhiều hơn nữa.
Thanks!

[Nhân Tâm]

web thông tin dịch vụ thì nên sử dung Responsive web design (http://www.panpic.vn/responsive-web-design-no-hien-thi-nhu-the-tren-cac-trinh-duyet-smartphone/). Chủ topic nên thiết kế web (http://www.panpic.vn/thiet-ke-web/) lại từ đầu, dung một số css framework có hỗ trợ responsive.

[lambertphoenix]

Bạn nên sử dụng Reponsive để thiết kế nhé, một website chạy trên tất cả các thiết bị khác nhau, từ Computer > Tablet > Mobile.

[vchweb]

Bạn hãy dùng Bootstrap nhé, rất nổi tiếng là bộ HTML framework, có tính năng responsive tự động hiển thị giao diện trên mọi kích cỡ màn hình.

[Skylake]

Bạn phải thiết kế cho nhiều kích thước màn hình sẽ co kéo ra sao: 320px, 480px, 960px,.... rồi bảo coder làm đúng thiết kế là được.