Giới thiệu

Giao diện web hiện đại phải có khả năng thay đổi theo kích thước màn hình từ máy tính bàn (desktop) đến máy tính bảng (tablet) và điện thoại di động (smartphone) – tức là responsive web.  Bạn đã từng làm quen với jQuery thì thư viện jQuery Mobile sẽ cho phép chúng ta tạo các website và ứng dụng có thể truy cập đến các thiết bị có kích cỡ khác nhau một cách dễ dàng.

Tải thư viện jQuery Mobile

Để dùng thư viện jQuery Mobile chúng ta cần tải thư viện này tại jquerymobile.com

Giải nén tập tin vừa tải sẽ như sau:

Sử dụng thư viện jQuery Mobile

Tạo tập tin Test.html và để tiện lợi chúng ta sẽ đặt tập tin này trong thư mục chứa các tập tin thư viện jQuery. Test.html có nội dung sau:


<html>
  <head>
     <title>First Mobile Example</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>
     Welcome to our first mobile web site. It's going to be the
     best site you've ever seen. Once we get some content. And a
     business plan. But the hard part is done!
    </p>
    <p>
      <i>Copyright Megacorp © 2012</i>
    </p>
  </body>
</html>

Kết quả khi thực thi Test.html với Chrome:

Giao diện mobile

Thêm các đoạn mã sau trong phần tử head


<meta name="viewport" content="width=device-width, initialscale=1">

<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />

<script type="text/javascript"

src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

Phần tử meta với các thuộc tính như name, content, initialscale cho phép giao diện trang web thay đổi theo kích cỡ màn hình.

Kết quả

Giao diện mobile

Điểm khác biệt là giao diện lần này sẽ nhìn dễ đọc hơn so với khi chưa dùng jQuery.

Nếu dùng các công cụ trực tuyến như CodePen thì dùng đoạn mã sau:


<!-- Include meta tag to ensure proper rendering and touch zooming -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Xem mã nguồn CodePen