Login

Giao diện thích ứng nhiều kích cỡ màn hình: điện thoại, máy tính bảng và gập

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Ứng dụng của bạn không chỉ chạy trên một chiếc điện thoại. Người dùng có máy nhỏ, máy lớn, máy tính bảng, màn hình gập và cả chế độ xoay ngang. Thiết kế thích ứng đảm bảo giao diện đẹp và dùng được trên mọi kích thước thay vì chỉ trên máy bạn thử.

Tư duy: không dùng kích thước cố định

Lỗi phổ biến của người mới là đặt chiều rộng và chiều cao bằng số cứng, ví dụ nút rộng 350. Trên màn hình nhỏ hơn nó tràn, trên màn hình lớn lại lọt thỏm. Thay vào đó hãy dùng bố cục co giãn: tỉ lệ, linh hoạt (flex), tối đa và tối thiểu, cùng các điểm ngắt để đổi bố cục khi không gian thay đổi.

Phân loại theo chiều rộng khả dụng

Thay vì phân biệt máy bằng tên thiết bị, hãy dựa vào không gian có sẵn của cửa sổ ứng dụng, vì ứng dụng có thể chạy trong chế độ chia đôi màn hình hoặc cửa sổ nhỏ. Một cách phân loại thường dùng:

LoạiChiều rộng gợi ýBố cục thường dùng
CompactDưới khoảng 600 dpMột cột, thanh điều hướng dưới
MediumKhoảng 600 đến 840 dpThanh điều hướng bên (rail), có thể hai cột
ExpandedTrên khoảng 840 dpHai hoặc ba cột, ngăn điều hướng cố định

Các ngưỡng trên là gợi ý theo hướng dẫn thiết kế của Android; bạn có thể điều chỉnh cho phù hợp sản phẩm.

Cách làm trong Flutter

Dùng LayoutBuilder để biết ràng buộc của vùng cha, hoặc MediaQuery để biết kích thước cửa sổ:

class ResponsiveScaffold extends StatelessWidget {
  const ResponsiveScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth >= 840) {
          return const Row(
            children: [
              SizedBox(width: 300, child: ListPane()),
              VerticalDivider(width: 1),
              Expanded(child: DetailPane()),
            ],
          );
        }
        return const ListPane(); // điện thoại: chỉ hiện danh sách
      },
    );
  }
}

Dùng LayoutBuilder thường tốt hơn MediaQuery khi bố cục phụ thuộc không gian của chính widget đó thay vì toàn màn hình.

Cách làm trong Jetpack Compose

@Composable
fun AdaptiveScreen(windowWidth: WindowWidthSizeClass) {
    when (windowWidth) {
        WindowWidthSizeClass.Compact -> ListScreen()
        else -> Row {
            ListScreen(modifier = Modifier.weight(1f))
            DetailScreen(modifier = Modifier.weight(2f))
        }
    }
}

Cách làm trong React Native

import { useWindowDimensions, View } from 'react-native';

export default function Screen() {
  const { width } = useWindowDimensions();
  const isWide = width >= 840;

  return (
    <View style={{ flex: 1, flexDirection: isWide ? 'row' : 'column' }}>
      {/* nội dung */}
    </View>
  );
}

Hook useWindowDimensions tự cập nhật khi xoay màn hình hoặc đổi kích thước cửa sổ.

Những điều cần lưu ý thêm

  • Vùng an toàn: tránh vùng bị tai thỏ, camera đục lỗ và thanh điều hướng che. Dùng SafeArea hoặc insets.
  • Chiều xoay: kiểm tra cả dọc và ngang; nếu không hỗ trợ ngang thì khóa hướng có chủ đích.
  • Giới hạn chiều rộng nội dung: trên màn hình rộng, dòng chữ quá dài khó đọc; đặt chiều rộng tối đa.
  • Cỡ chữ hệ thống: người dùng có thể phóng chữ lớn; đừng ép chiều cao cố định cho khối chứa chữ.
  • Màn hình gập: tránh đặt nội dung quan trọng lên vùng bản lề.

Kiểm thử

  1. Dùng nhiều máy ảo với kích thước khác nhau, kèm thiết bị thật nếu có.
  2. Thử chế độ chia đôi màn hình và thay đổi kích thước cửa sổ.
  3. Thử cỡ chữ lớn nhất và chế độ thu phóng màn hình.
  4. Thử xoay liên tục để chắc không mất trạng thái.

Kết luận

Hãy xem bố cục như thứ co giãn theo không gian chứ không phải bản vẽ cố định. Chỉ cần dùng ràng buộc linh hoạt, vài điểm ngắt hợp lý và kiểm thử trên nhiều kích thước là ứng dụng của bạn đã chuyên nghiệp hơn nhiều.

Bảng kiểm tra nhanh cho giao diện thích ứng

  • Không có chiều rộng hay chiều cao cố định cho vùng chứa chữ.
  • Có điểm ngắt cho ít nhất hai cách bố cục: một cột và nhiều cột.
  • Nội dung không bị che bởi tai thỏ, thanh điều hướng hay bàn phím.
  • Ảnh co giãn đúng tỉ lệ, không méo.
  • Hoạt động tốt khi xoay màn hình và đổi cỡ chữ hệ thống.
  • Vùng chạm vẫn đủ lớn trên máy nhỏ.

Sai lầm khi làm cho máy tính bảng

Cách làm lười là kéo giãn giao diện điện thoại ra toàn màn hình, khiến nút to bất thường và dòng chữ quá dài. Thay vào đó hãy tận dụng không gian: hiển thị danh sách và chi tiết cạnh nhau, dùng lưới nhiều cột, đặt chiều rộng tối đa cho nội dung đọc. Chỉ vài điều chỉnh như vậy đã làm ứng dụng trông được chăm chút và đáp ứng yêu cầu chất lượng của cửa hàng cho thiết bị màn hình lớn.

Muốn thực hành thiết kế giao diện thích ứng qua dự án, bạn có thể tham khảo các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment