logo
Hỗ trợ: 24/7
Điện thoại: 098 984 8886
Email: info@thuonghieuweb.com

Nâng cấp website tương thích với thiết bị di động

updated on 2023-03-31


Hiện nay số lượng người duyệt web từ di động đã vượt qua lượng người duyệt web trên PC nên việc nâng cấp website tương thích với thiết bị di động là cực kỳ cần thiết để website của bạn tiếp cận một cách thân thiện nhất với khách hàng. Dưới đây là một số bước cơ bản để nâng cấp website của bạn lên giao diện responsive, tương thích cả với máy tính truyền thống và thiết bị di động.

Bước 1: Kiểm tra mobile friendly với công cụ của google


Đầu tiên các bạn vào link này https://www.google.com/webmasters/tools/mobile-friendly/ và gõ đường dẫn đến website của bạn. Nếu bạn thấy thông báo như hình ảnh dưới đây có nghĩa là website của bạn chưa tương thích với thiết bị di động và cần phải nâng cấp ngay.

kiếm tra web tương thích với di động

Thông báo trên có nghĩa là, trang web chưa thân thiện với người dùng bởi 3 nguyên nhân
  • Chữ quá nhỏ, không đọc được
  • Các menu liên kết quá gần nhau
  • Khung nhìn cho các thiết bị di động chưa được thiết lập

Bước 2: Thiết lập khung nhìn cho các thiết bị di động (Mobile viewport set)


Thao tác này rất đơn giản bạn chỉ cần thêm đoạn code sau vào phần phần header của website và kiểm tra lại kết quả của mình bằng một smart phone bất kỳ hoặc bằng link kiểm tra của google nói trên

code-viewport

Hãy xem hình ảnh dưới đây để thấy một website trước và sau khi thiết lập view port hiển thị trên di động ra sao.

set viewport


Bước 3: Xây dựng đoạn code nhận diện thiết bị đầu cuối


Mỗi một thiết bị khi truy cập vào một website đều phải gửi các thông tin cơ bản của nó lên máy chủ, các thông tin này bao gồm địa chỉ IP, hệ điều hành, tên của trình duyệt web.... Chúng ta sẽ viết một đoạn code để nhận diện các thông tin này và quyết định xem sẽ gửi trả cho thiết bị file trình bày như thế nào.

Các bạn có thể download đoạn code PHP nhận diện thiết bị đầu cuối ở đây và chạy thử đoạn code này để đảm bảo là nó nhận diện thành công thiết bị đầu cuối. Đoạn code này nhận diện hệ điều hành, tên trình duyệt, địa chỉ IP của thiết bị, từ đó xác định luôn vị trí địa lý của thiết bị bằng cách tham chiếu đến trang www.geoplugin.net.

Bước 4: Áp dụng cơ chế nhận thiết bị đầu cuối vào website chính thức.


Để áp dụng đoạn code nói trên, các bạn cần upload đoạn code đó lên một chỗ nào đó của website và sau đó dùng hàm include hoặc require_once của php để tải đoạn code đó mỗi khi vào trang. Lưu ý trước khi nhúng code này các bạn cần rào hoặc bỏ lệnh print_r đi để không in các thông tin nhận diện thiết bị đầu cuối ra màn hình.

thiết kế web di động 1

Sau đó dùng 2 câu lệnh if để xử lý khi xác định được thiết bị đầu cuối là một thiết bị di động. Câu lệnh thứ nhất để lựa chọn style sheet sẽ load lên cùng với trang:

thiết kế web di động 2

Câu lệnh thứ 2 sử dụng để tải layout phù hợp với thiết bị đầu cuối. Lưu ý các bạn cần tạo ra một file layout.php và đặt vào thư mục mobile trên website. Trang này tạm thời chỉ cần echo một dòng "Giao diện cho di động đang được xây dựng..."

code responsive


Sau các bước này các bạn vào trang web của mình bằng PC và bằng một thiết bị di động. Khi vào bằng PC bạn sẽ thấy trang web xuất hiện bình thường, còn khi vào bằng di động các bạn sẽ thấy dòng chữ "Giao diện cho di động đang được xây dựng..."

Bước 5: Xây dựng giao diện responsive


Để xây dựng giao diện responsive các bạn đọc tiếp trong bài "Thiết kế website responsive cho di động" trong đó tôi trình bày chi tiết cách làm layout và style sheet cho các thiết bị di động. 

Chúc các bạn thành công!





   
 
Có thể bạn muốn xem thêm....

Những điều cần biết khi xây dựng website

Xây dựng một website không đơn giản chỉ là một gian hàng hay một tờ rơi. Bạn cần phải làm mọi cách để website của mình hướng tới khách hàng, và quan trọng hơn cả, là làm sao để nội dung của bạn có sức lan tỏa nhanh chóng trong môi trường mạng từ đó lôi kéo khách hàng đến với website của bạn

Xem chi tiết

Những điều cần biết về dịch vụ email với tên miền riêng

Email tên miền riêng là email gắn với tên miền của doanh nghiệp kiểu như tennhanvien@tencongty.com. Email tên miền riêng sẽ tạo sự chuyên nghiệp và tin cậy khi giao dịch, đồng thời có thể cấp phát cho nhân viên khi mới đi làm, thu hồi lại khi nhân viên đó thôi việc và lưu trữ được mọi giao dịch trên email mà không sợ nhân viên đổi mật khẩu, mang theo hòm thư khi rời công ty...

Xem chi tiết
Đội ngũ lập trình viên, kỹ thuật viên và seo-er của Thương Hiệu Web cam kết

Hỗ trợ 24/7

Hỗ trợ khách hàng 24 giờ 1 ngày, 7 ngày 1 tuần qua điện thoại, email và chat online

Hoàn tiền 100%

Trong thời gian 45 ngày sử dụng dịch vụ, nếu quý khách không hài lòng!

Cam kết uptime 99.99%

Nếu dịch vụ của quý khách bị gián đoạn, chúng tôi sẽ cộng thêm 1 tháng sử dụng

KHÁCH HÀNG NÓI VỀ CHÚNG TÔI

Một đơn vị xây dựng web tận tâm và chuyên nghiệp!

"Thương Hiệu Web là đơn vị thiết kế website có năng lực, tôn trọng và có trách nhiệm với khách hàng, đặt mình vào vị trí khách hàng để mang lại cho khách hàng nhiều giá trị từ chính dịch vụ của mình. Với tôi, Thương Hiệu Web là một lựa chọn hợp lý!" Chị Nguyễn Phượng, TP kinh doanh, Công Ty Cổ Phần Quản Lý Công Trình Đô Thị Hải Dương.

Xem bình luận trên FB

Website

Tên miền, hosting

Dịch vụ email

Hỗ trợ khách hàng

Sitemap Điều khoản sử dụng Chính sách riêng tư
Bản quyền thuộc về công ty cổ phần truyền thông số VDATA
Tầng 2, tòa nhà 71 Hoàng Cầu, Đống Đa, Hà Nội
Điện thoại: (04) 3990 9643 - Email: info@vdata.com.vn
Giấy chứng nhận ĐKKD số: 0102766780, do Sở KHĐT Tp Hà Nội cấp ngày 28/04/2009

Online