Làm cách nào để bắt đầu phát triển trang web có thể duyệt từ điện thoại di động? Ví dụ: nếu bạn duyệt trang web Gmail từ iPhone, trang web trông khác với trang web thông thường. Bạn phải thiết kế hai trang web khác nhau để làm điều này? Làm cách nào để biết trang web có được trình duyệt trên điện thoại di động truy cập không?Làm cách nào để thiết kế trang web cho điện thoại di động
Bạn KHÔNG phải thiết kế hai trang web khác nhau, nhưng có thể bạn muốn nếu điều quan trọng là cho phép người dùng thiết bị di động truy cập trang web của bạn.
Có một số cách để giải quyết vấn đề này, mỗi cách có ưu và nhược điểm. Tôi giả định rằng trang web của bạn có thông tin trong một cơ sở dữ liệu và xuất bản dữ liệu đó bằng cách sử dụng một tập hợp mẫu? (Giống như một trang Ruby on Rails hoặc Django; một trang PHP; một blog; vv) Nếu bạn đã mã hóa một loạt các trang HTML tĩnh, điều này sẽ tốn nhiều công sức hơn cho bạn.
1: Tương tự HTML, stylesheets khác nhau cho màn hình nền và MOBILE
Ý tưởng: Bạn cung cấp những cấu trúc HTML tương tự cho tất cả các yêu cầu. Bạn tạo một biểu định kiểu cho SCREEN và một cho MOBILE.
Tốt: Dành cho bạn, lập trình viên. Bạn dễ dàng duy trì 2 bảng định kiểu hơn là duy trì 2 trang mẫu hoàn toàn riêng biệt.
Xấu: Dành cho người dùng của bạn. Trang web dễ sử dụng trên thiết bị di động thường không hiệu quả đối với trình duyệt thông thường; và các trang web được tối ưu hóa cho máy tính để bàn/máy tính xách tay thường thất bại thảm hại trên thiết bị di động. Rõ ràng là nó phụ thuộc vào cách bạn mã các trang của bạn, nhưng trong hầu hết các trường hợp, việc đẩy trang web thông thường của bạn đến một trình duyệt di động sẽ không tốt cho người dùng của bạn. (Xem http://www.useit.com/alertbox/mobile-usability.html cho một bản tóm tắt của nghiên cứu khả năng sử dụng gần đây Jakob Nielsen trên các trang web điện thoại di động.)
2: Duy trì trang web riêng
(Gmail duy trì thậm chí nhiều hơn 2 hệ thống Họ về cơ bản có các ứng dụng container khác nhau/mẫu mà xử lý cùng một dữ liệu: phiên bản trình duyệt AJAX đầy đủ, phiên bản trình duyệt HTML đơn giản; phiên bản di động cơ bản; ứng dụng Blackberry gốc; và ứng dụng iPhone gốc.)
Đây là tiêu chuẩn mới nổi cho các trang web thực sự quan tâm đến việc cả sự hiện diện trên thiết bị di động và máy tính để bàn. Nó hiệu quả hơn cho bạn, nhưng nói chung nó tốt hơn cho người dùng của bạn.
Ở phía trên, bạn có thể tạo một trang HTML thuần túy hoạt động cho thiết bị di động và hoạt động như một dự phòng cho người dùng web hiếm hoi không có javascript hoặc có vấn đề về khả năng truy cập lớn ngăn họ sử dụng trang web "đầy đủ".
Ngoài ra, tùy thuộc vào cơ sở người dùng của bạn: ở Hoa Kỳ, mọi người thường có quyền truy cập vào máy tính để bàn/máy tính xách tay và sử dụng thiết bị di động của họ để truy cập phụ trợ. Ví dụ: tôi đặt vé máy bay và xe cho thuê bằng máy tính để bàn của mình, nhưng tôi muốn tìm mã đặt chỗ trên điện thoại di động của mình. Trong nhiều trường hợp, bạn có thể loại bỏ chức năng mà bạn cung cấp trên trang web dành cho thiết bị di động và yêu cầu máy tính đầy đủ thực hiện các trường hợp sử dụng không phổ biến.
Thủ tục cơ bản:
Bạn có thể muốn theo dõi Quirksmode để biết các bài viết mới nổi về thử nghiệm trên thiết bị di động của mình.
3: Templates đầu ra khối dữ liệu khác nhau tùy thuộc vào user-agent, và duy trì stylesheets riêng
Giống như (2), điều này đòi hỏi bạn phải sniff các user agent. Không giống như (2), bạn vẫn đang sử dụng tất cả cùng một logic trang và không phải duy trì hai trang web riêng biệt. Điều này có thể không sao nếu bạn chỉ đang xử lý blog hoặc trang web chủ yếu là đọc dữ liệu.
Trong mã mẫu của bạn, bạn có thể nói những câu như
if($useragentType != mobile) {
echo('bigBlockOfRelatedArticlesAndAds.php');
}
này cho phép bạn chủ yếu là duy trì một bộ các tập tin mẫu. Bạn cũng có thể hợp lý hóa các trang mà bạn đang gửi cho người dùng di động của mình, vì vậy họ không có trang lớn cồng kềnh khi họ chỉ muốn đọc bài đăng trên blog của bạn hoặc bất kỳ trang nào.
Bạn phải thiết kế hai trang web khác nhau để thực hiện việc này?
Có
Làm thế nào tôi có thể biết nếu trang web được truy cập bởi một trình duyệt di động?
Ngôn ngữ lập trình của bạn có thể có một số cách xem thông tin của khách hàng. PHP, ví dụ, có một biến superglobal $_SERVER có tất cả các loại thông tin của cả máy chủ phục vụ và ứng dụng khách truy cập. Trong trường hợp này, bạn sẽ quan tâm đến giá trị của $_SERVER['HTTP_USER_AGENT'], mà sẽ cung cấp cho các kết quả sau, tôi nên ghé thăm một trang:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
này nói với bạn rằng tôi đang chạy Mac OS X 10.5.6, sử dụng Safari 4.0. Có các từ khóa đã biết cho các trình duyệt di động khác nhau. Một phiên bản của trình duyệt của iPhone, ví dụ, có tác nhân người dùng sau:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
"iPhone" đã mang lại cho nó đi, nhưng là tiếp tục khẳng định bởi các từ khoá "di động" và "Safari"
Giữ nó đơn giản, suy nghĩ opera mini và bạn sẽ làm cho nó đúng. (iPhone có nhiều ra một trình duyệt thông thường ...)
Tập trung vào nội dung
Tránh plugins
Thực hiện theo các tiêu chuẩn web
nội dung riêng biệt từ bố cục/thiết kế , sử dụng css nhiều như posible.
Sử dụng văn bản và hình ảnh.
Thêm phần còn lại của chuông và còi nếu bạn phải, nhưng đảm bảo nội dung của trang web luôn khả dụng ngay cả khi chuông và còi được tắt. Nếu bạn có thể duyệt trang bằng một trình duyệt đơn giản như lynx và trình duyệt thông thường như firefox thì bạn đang đi đúng hướng.
Để biết thêm thông cảm thấy tự do tham quan any browser campaign
Chỉnh sửa: Trong trường hợp nó không phải là rõ ràng bạn làm việc với css khác nhau với nhiều loại khác nhau của các trình duyệt, nhưng luôn luôn sử dụng cùng một nội dung. Truy cập css zen garden để có bản trình diễn hay.
Cập nhật: Thêm liên kết vào các loại phương tiện truyền thông và như được người khác nói, đó là tùy chọn cầm tay thú vị.
Hầu hết các trang web có một tên miền phụ hơi khác nhau cho các trang web điện thoại di động (hầu hết sử dụng "m"). ví dụ. flickr sử dụng m.flickr.com
(có một đề nghị để sử dụng .mobi TLD nhưng tôi chưa bao giờ thấy rằng sử dụng)
Hãy thiết kế siêu đơn giản, không sử dụng quá nhiều đồ họa, nơi bạn cần phải giữ chúng như nhỏ nhất có thể. This có thể hữu ích cho thiết kế.
Tôi có thể sẽ tạo một nhóm trang khác cho người dùng thiết bị di động, sử dụng cùng các đối tượng kinh doanh, v.v. khi bạn đang sử dụng cho trang web chính.
Nếu sự khác biệt giữa thiết kế của hai điểm tham quan không phải là tuyệt vời, bạn có thể có được cách để chỉ phục vụ các tệp CSS riêng biệt?
Đối với kiểm tra làm thế nào một weppage trông trong một trình duyệt di động sử dụng Opera Mini Emulator
Đa số các thiết bị di động những ngày này hỗ trợ "stylesheets di động" mà chỉ đơn giản là stylesheets thay thế để hiển thị những thứ đơn giản hơn. Bạn có thể thêm một kiểu điện thoại di động vào trang web của bạn theo cách thông thường và bao gồm các media="handheld" thuộc tính:
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
Sau đó, những phong cách sẽ áp dụng cho điện thoại di động.
Vấn đề duy nhất với phương pháp này là nếu HTML của bạn cồng kềnh, có thể mất một lúc để tải trang vì hầu hết các trình duyệt di động đều chậm hơn (ngoại trừ Opera Mini). Đó là lý do tại sao các trang web lớn hơn như flickr và digg sử dụng các trang web riêng biệt.
Ghi chú thêm:
media. IIRC thêm mã ở trên sẽ làm cho trình duyệt bỏ qua bảng định kiểu đầu tiên. Nếu bạn thêm media="all" vào cái đầu tiên, cả hai sẽ được sử dụng (và do đó bạn có thể ghi đè kiểu gốc hơn là bắt đầu lại).Kiểm tra dự án WURFL. Mục đích của nó là giúp các nhà phát triển nhắm mục tiêu nhiều trình duyệt trên điện thoại và bắt đầu quay lại trước khi có Mobile Safari, trở lại vào những ngày HDML, WAP và XHTML-MP. Đó là up-to-date tuy nhiên, lưu trữ khả năng của các thiết bị hiện đại như iPhone. Nó có dữ liệu trên hơn 400 thiết bị và có các thư viện trong Java, PHP, Perl, Ruby, Python, .NET, C++. Tùy thuộc vào mức độ bạn muốn nhắm mục tiêu ứng dụng dành cho thiết bị di động của mình, đó là điều cần xem xét. Here's danh sách các trang web sử dụng WURFL.
Một dự án liên quan khác được viết bởi Luca Passani (người đồng sáng lập và duy trì WURFL) là Switcher. Bạn có thể sử dụng điều này để tự động chuyển hướng đến phiên bản di động của trang web của bạn.
Trang web của bạn nên giới hạn đối với điện thoại di động có thể hỗ trợ các yêu cầu tối đa. bạn thậm chí không thể giải trí tất cả các mobile phone.
Trang web của bạn nên có bộ phong cách css khác nhau và HTTP AGENT phải kiểm tra loại ứng dụng khách theo yêu cầu Css nên chọn.
Trong Opera thông thường, bạn có thể sử dụng Xem> Màn hình nhỏ. Nó sẽ trông rất giống Opera Mini, nhưng có lẽ có sự khác biệt tinh tế trong hành vi của CSS và JavaScript. –