Các phương pháp hay nhất cho ứng dụng web

Việc phát triển trang web và ứng dụng cho thiết bị di động đặt ra những thách thức khác nhau so với đến việc phát triển một trang web dành cho trình duyệt web dành cho máy tính. Các phương pháp sau có thể giúp bạn cung cấp ứng dụng web hiệu quả nhất dành cho Android và các thiết bị di động khác.

  1. Chuyển hướng thiết bị di động sang phiên bản chuyên dụng dành cho thiết bị di động của trang web. Có một vài để thực hiện việc này bằng cách sử dụng chuyển hướng phía máy chủ. Một phương pháp phổ biến là "ngửi" thời gian Chuỗi Tác nhân người dùng do trình duyệt web cung cấp. Để xác định có phân phát phiên bản trên thiết bị di động của trang web hay không, hãy tìm phiên bản "thiết bị di động" trong Tác nhân người dùng.
  2. Sử dụng HTML5 cho thiết bị di động. HTML5 là ngôn ngữ đánh dấu phổ biến nhất được sử dụng cho các trang web dành cho thiết bị di động. Tiêu chuẩn này khuyến khích phát triển ưu tiên thiết bị di động để đảm bảo rằng trang web hoạt động trên nhiều thiết bị. Không giống như các ngôn ngữ web trước đây, HTML5 sử dụng <DOCTYPE> và charset khai báo: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Sử dụng siêu dữ liệu khung nhìn để đổi kích thước trang web của bạn cho phù hợp. Trong tài liệu của bạn <head>, hãy cung cấp siêu dữ liệu chỉ rõ cách bạn muốn khung nhìn của trình duyệt hiển thị trang web của bạn. Ví dụ: siêu dữ liệu khung nhìn có thể chỉ định chiều cao và chiều rộng cho khung nhìn của trình duyệt, tỷ lệ trang ban đầu và mật độ màn hình mục tiêu.

    Ví dụ sau đây trình bày cách thiết lập siêu dữ liệu của khung nhìn:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Để biết thêm thông tin về cách sử dụng siêu dữ liệu khung nhìn cho thiết bị chạy Android, hãy đọc bài viết Hỗ trợ nhiều màn hình trong ứng dụng web.

  4. Sử dụng bố cục tuyến tính dọc. Tránh việc người dùng phải cuộn sang trái và phải khi điều hướng trang của bạn. Người dùng có thể cuộn lên và xuống dễ dàng hơn và làm cho trang của bạn đơn giản hơn.
  5. Đặt chiều cao và chiều rộng của bố cục thành match_parent. Cài đặt WebView chiều cao và chiều rộng của đối tượng thành match_parent đảm bảo các thành phần hiển thị của ứng dụng có kích thước chính xác. Chúng tôi không khuyến khích việc đặt thành wrap_content vì điều này dẫn đến việc định cỡ không chính xác. Tương tự, việc đặt chiều rộng bố cục thành wrap_content không được hỗ trợ và khiến WebView của bạn hãy sử dụng chiều rộng của thành phần mẹ. Do đó, bạn cần đảm bảo rằng không có chiều cao và chiều rộng của đối tượng bố cục mẹ của đối tượng WebView được đặt thành wrap_content
  6. Tránh yêu cầu nhiều tệp. Vì thiết bị di động thường có tốc độ kết nối chậm hơn máy tính để bàn, hãy làm cho trang của bạn tải nhanh nhất có thể. Một cách để tăng tốc độ đó là tránh tải các tệp bổ sung như biểu định kiểu và tệp tập lệnh trong <head>. Ngoài ra, hãy cân nhắc thực hiện phân tích trên thiết bị di động với PageSpeed Insights của Google cung cấp các đề xuất tối ưu hóa chi tiết dành riêng cho ứng dụng của bạn.

Tài nguyên khác