Tôi có nên xem xét mọi thiết bị di động nhỏ hơn 768px không?

Question

Tôi đã tạo một trang web hoạt động khác trên thiết bị cảm ứng so với máy tính để bàn. Sự khác biệt chính là hầu hết các hiệu ứng di chuột được thay đổi thành nhấp chuột trên thiết bị cảm ứng. Để kiểm tra xem user agent là một thiết bị liên lạc tôi sử dụng này trong javascript:

var yesIfTouchDevice = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); 

if(istouchdevice) { 
    // change hover to clicks 
} 

Sau đó, trong css Tôi giả định rằng tất cả các user agent dưới 768px sẽ là một thiết bị cảm ứng. Tôi đã bố trí bố cục đó. Ví dụ. Tôi có nút bật tắt hiển thị menu trên máy. Hơn nữa, tôi có nhiều thứ khác hiển thị cửa sổ bật lên và lớp ẩn khác chỉ trên tap (sự kiện chạm).

Chỉ vài phút trước, ý nghĩ xảy ra là có rất nhiều điện thoại di động không được kích hoạt, như Nokia Asha và N series và nhiều thứ khác mà tôi thậm chí không biết. Câu hỏi của tôi là:

1. Thị phần của trình duyệt di động không chạm là gì? Có bao nhiêu phần trăm người dùng sử dụng các trình duyệt đó?
2. Tôi đã thực hiện toàn bộ trang web của mình bằng chức năng cảm ứng giả định khởi động cho các thiết bị màn hình nhỏ. Có thực hiện tốt nhất ngày html css thực hiện đề nghị làm cho trang web chỉ cho các thiết bị di động được kích hoạt cảm ứng?

Chỉnh sửa: Sau khi nghe các đề xuất, tôi cũng đã quyết định tối ưu hóa cho thiết bị di động không chạm. Nhưng tôi không chắc chắn làm thế nào họ bắt chước hành vi của chuột nói chung. Tôi đoán rằng các yếu tố có thể tập trung có thể được chọn và nhấp vào. Vì vậy,

3. Tôi có nên làm cho tất cả các yếu tố của mình hoạt động trên di chuột hay không, ví dụ: điều hướng, có thể tập trung với tabindex = "1"?

Tôi đã thử nghiệm trang web của mình trên trình duyệt mini opera ở Kemulator và thấy rằng trang này tải lại trang khi tôi nhấp vào điều hướng và một số lớp khác không được hiển thị, ví dụ: phương thức bootstrap bật lên.

4. Trình duyệt mini opera có hỗ trợ javascript không?

Answer 1

Bạn có thể sử dụng mã từ detectmobilebrowsers. Chỉ cần thay thế url http://www.detectmobilebrowsers.com/mobile bằng url cho trang web trên điện thoại di động. Đây là link trực tiếp vào mã javascript. Chỉ cần thay đổi phần mở rộng tập tin để js và tất cả mọi thứ hoạt động.

Answer 2

1. Thị phần của trình duyệt di động không chạm là gì? Có bao nhiêu phần trăm người dùng sử dụng các trình duyệt đó?

Chúng tôi không có dữ liệu này. Nhưng dựa trên thị phần hiện tại của hệ điều hành và thiết bị người dùng chia sẻ, nó hầu như không đạt 1%. Nhưng mối quan tâm chính không phải là do thiết bị di động không chạm. Cửa sổ trình duyệt không phải lúc nào cũng được tối đa hóa, người dùng có thể giảm chiều rộng củai ngay cả < 768px. I E. Sử dụng trình duyệt side-by-side và một notepad trên độ phân giải 1400 x 900.

2. Tôi đã tạo toàn bộ trang web với chức năng cảm ứng giả định khởi động cho các thiết bị màn hình nhỏ. Có thực hiện tốt nhất ngày html css thực hiện đề nghị làm cho trang web chỉ cho các thiết bị di động được kích hoạt cảm ứng?

No. Đề xuất hiện tại là thiết kế đáp ứng bằng cách sử dụng phương pháp di động đầu tiên. Sử dụng trang web dành cho thiết bị di động để sao chép mã, thiết kế, bảo trì và chi phí. Nó cũng ảnh hưởng đến SEO và phân tích lưu lượng truy cập cho mục đích kinh doanh.

Tôi có nên làm cho tất cả các yếu tố của mình hoạt động trên di chuột hay không, ví dụ: điều hướng, có thể đặt tiêu điểm với tabindex = "1"?

Có và không. Tất cả các phần tử có thể nhấp (nút, liên kết) và biểu mẫu đầu vào phải là đối tượng của điều hướng có thể truy cập, nhưng bạn không nhất thiết phải đặt tabindex cho tất cả các phần tử có thể nhấp để tạo thành phần tử "có thể lấy tiêu điểm", trình duyệt sẽ thực hiện theo thứ tự mặc định mã. Sử dụng tabindex để thực thi luồng liên kết điều hướng của bạn, nếu thứ tự mặc định không có ý nghĩa với bạn hoặc nếu bạn muốn đảm bảo rằng bạn sẽ có luồng được sửa.

4. Tôi đã được thử nghiệm trang web của tôi trên trình duyệt opera mini trong Kemulator và thấy rằng nó tải lại trang khi tôi bấm vào menu và một số lớp khác không được hiển thị, ví dụ phương thức bootstrap bật lên.

Trình duyệt mini opera có hỗ trợ javascript không?

No. Cũng như CSS hiện đại. Opera Mini giảm tương tác do tính chất của nó khi sử dụng proxy để nén tài nguyên trang.

Opera Mini phổ biến hơn ở Châu Phi, Trung Đông và Đông Âu. Nếu những vùng này không tập trung vào người dùng của bạn, tôi sẽ đề xuất bạn không dành thời gian để làm cho trang web hoạt động hoàn toàn trên Opera Mini.

Answer 3

Thị phần của trình duyệt di động không chạm là gì? Có bao nhiêu phần trăm người dùng sử dụng các trình duyệt đó?

Điều này thường phụ thuộc vào khu vực để nó phụ thuộc vào đối tượng của bạn. Bạn có thể nhận được một số ý tưởng từ

https://deviceatlas.com/device-data/explorer/webusage-by-country/traffic/mobile/country/us/type/browser_name

http://gs.statcounter.com/#all-as-ww-monthly-201610-201612-map

Nhưng kinh nghiệm của tôi đây không phải là rất hữu ích bởi vì rất nhiều được xác định các loại khách hàng sản phẩm của bạn focusses trừ khi nó là một sản phẩm rất rộng rãi thích nghi trên ví dụ Trên một trang web thương mại điện tử thích hợp bán những thứ có giá trị cao, bạn sẽ thấy Safari nổi bật. Vì vậy, trước khi giải quyết vấn đề nếu bạn có thể thu thập một số dữ liệu (nếu bạn có sản phẩm hiện có) hoặc yêu cầu diễn đàn/nhóm fb cho những người có sản phẩm trong miền tương tự, nó sẽ giúp bạn ưu tiên, vì xây dựng là một vấn đề nhỏ hơn duy trì nó.

Tôi đã tạo toàn bộ trang web với chức năng cảm ứng giả định khởi động cho các thiết bị màn hình nhỏ. Có thực hiện tốt nhất ngày html css thực hiện đề nghị làm cho trang web chỉ cho các thiết bị di động được kích hoạt cảm ứng? Chỉnh sửa: Khi nghe các đề xuất, tôi cũng đã quyết định tối ưu hóa cho các thiết bị di động không chạm. Nhưng tôi không chắc chắn làm thế nào họ bắt chước hành vi của chuột nói chung. Tôi đoán rằng các yếu tố có thể tập trung có thể được chọn và nhấp vào.Vì vậy,

Nếu bạn muốn trang trải nhiều loại trình duyệt sử dụng https://modernizr.com để phát hiện các tính năng và phản hồi tương ứng hoặc có tương tác dự phòng. Thận trọng, bạn không nên kéo thư viện nếu bạn chỉ muốn một vài tính năng, vì vậy hãy xem các trường hợp sử dụng của bạn. Mặt khác, lợi thế là nó tiếp tục được cập nhật.

Bạn có thể xem danh sách liên lạc (và tương tự) các sự kiện bị sa thải bởi các trình duyệt khác nhau ở đây http://www.quirksmode.org/mobile/tableTouch.html#link1

Đối với danh sách táo các sự kiện phi Chạm vào Chụp kiểm tra này https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events

Tương tự như vậy bạn sẽ phải đào cho danh sách sự kiện cho các trình duyệt mà bạn muốn hỗ trợ.

Tôi có nên làm cho tất cả các yếu tố của mình hoạt động trên di chuột hay không, ví dụ: điều hướng, có thể đặt tiêu điểm với tabindex = "1"?

Đối với tabindex những gì Andre đề xuất là đúng (có thứ tự đúng cho các yếu tố quan trọng cần thực hiện ở giai đoạn thử nghiệm).

Kiểm tra điều này để hiểu rõ khi nào nên tránh và các trường hợp có thể tạo sự cố. Có nhiều hơn những cái được liệt kê ở đây, do đó, làm một nghiên cứu tốt nếu bạn đang chơi quá nhiều với tabindex.

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

Tôi đã được thử nghiệm trang web của tôi trên trình duyệt opera mini trong Kemulator và thấy rằng nó tải lại trang khi tôi bấm vào menu và một số lớp khác không được hiển thị, ví dụ phương thức bootstrap bật lên.

Trình duyệt mini opera có hỗ trợ javascript không?

Trong hầu hết các trường hợp, quá trình xử lý Opera Mini được thực hiện qua máy chủ Opera, điều này thường ngăn JS hoạt động chính xác.

Đây là những cách giải quyết đối với một số tính năng, mà bạn có thể tham khảo https://operamini.tips/#/

Tất cả đang được nói, tôi vẫn sẽ đề nghị, làm một nghiên cứu dùng mục tiêu tốt, và từ đó ưu tiên danh sách hỗ trợ cho ban đầu của bạn phiên bản. Nó có thể yêu cầu đầu tư thời gian và có thể một số tiền quá nhưng nó là hoàn toàn giá trị nó. Sau đó cải thiện những cái được liệt kê cho đến khi bạn có thể loại bỏ các lỗi chính, và khi bạn có băng thông thì tấn công phần tiếp theo của danh sách. Có một cách tiếp cận hỗ trợ quá nhiều trình duyệt/thiết bị/màn hình lúc đầu sẽ đưa bạn xuống "mê cung hỗ trợ" từ nơi bạn sẽ bị mắc kẹt với việc xóa lỗi ở mọi nơi và tính năng phát triển sẽ mất tập trung.

Cũng tích hợp GA Analytics (hoặc bất kỳ khác) và đính kèm sự kiện vào các tương tác chính và tiếp tục theo dõi theo kích thước màn hình, thiết bị và trình duyệt. ví dụ. Opera Mini mang lại cho tôi 0 sự kiện trong một số trang và làm tăng báo thức. Đôi khi có thể không phải là 0 nhưng tỷ lệ người dùng tương tác/người dùng đã truy cập thấp. Bạn có thể đính kèm các sự kiện bằng cuộn, trường chọn, vv Ưu tiên đầu tiên trên các tính năng chính của sản phẩm, theo dõi, chọn những gì cần tập trung, cải thiện, kiểm tra và sau đó chuyển sang phần tiếp theo. Vì vậy, về cơ bản điều này sẽ tạo thành một ma trận các tính năng với kích thước trình duyệt/màn hình và sau đó ưu tiên phù hợp tùy thuộc vào loại lưu lượng truy cập của bạn.