2016-07-12 27 views
5

Trong tài liệu .NET Core có trang có tên "Building Mobile Specific Views" nhưng đang được xây dựng: https://docs.asp.net/en/latest/mvc/views/mobile.html.Lượt xem cụ thể trên thiết bị di động/Phát hiện thiết bị

Có ai có một số thông tin chi tiết về cách xây dựng chế độ xem trên thiết bị di động hoặc phát hiện thiết bị thành công không?

+6

Trong khung ASP.NET MVC cũ có sử dụng tính năng phát hiện tích hợp, nơi bạn có thể đặt tên cho các chế độ xem như "MyView.cshtml" và "MyView.iOS.cshtml" hoặc tương tự và nhận chúng được phân phát dựa trên người dùng của họ đại lý. Nhưng thực tế này là khá nản lòng ngày nay. Tốt hơn là tạo một thiết kế đáp ứng hoạt động trên tất cả các thiết bị. Hãy tìm "bootstrap thiết kế đáp ứng" chẳng hạn. Bootstrap ban đầu được phát triển bởi Twitter để nhận ra một thiết kế đáp ứng – Tseng

+0

Có lẽ @Tseng là đúng ở đây, nhưng chỉ FYI (vì tôi không về thiết kế đáp ứng: -)) ... nếu bạn vẫn muốn làm theo cách tiếp cận của "MyView.cshtml "và" MyView.iOS.cshtml ", sau đó bạn có thể xem cách MVC's' LanguageViewLocationExpander' hoạt động như thế này có vẻ tương tự ... –

+0

@Tseng Nếu bạn muốn thêm bạn bình luận làm Câu trả lời, tôi sẽ đánh dấu là chấp nhận như nó là những gì mọi người đang nói. –

Trả lời

1

Cung cấp các chế độ xem cụ thể dựa trên tác nhân người dùng của trình duyệt là một khái niệm lỗi thời vì nó không nói nhiều về khả năng của thiết bị. Ví dụ, iPhone và iPad có kích thước màn hình khác nhau và thậm chí cả các trình duyệt di động cũng cho phép thay đổi tác nhân người dùng.

Khái niệm mới được gọi là Thiết kế đáp ứng trong đó một trang tạo một trang phù hợp và hiển thị/ẩn phần tử nhất định dựa trên chiều rộng màn hình có sẵn. Một khung CSS deisgn CSS phổ biến đáp ứng là Bootstrap, ban đầu được phát triển bởi Twitter và sau này có nguồn mở.

Here là ví dụ về thiết kế đáp ứng. Khi bạn truy cập vào site và thay đổi chiều rộng của trình duyệt, bản cập nhật thiết kế cũng như thiết kế 3 đến 2 đến 1 cột với trình duyệt hoặc thiết bị di động như điều hướng (với trình đơn Hamburger).

+1

Điều này chủ yếu là đúng, nhưng có những trường hợp chúng tôi nên gửi DOM khác nhau cho điện thoại cho màn hình nhỏ, thay vì chỉ ẩn/hiển thị. – martonx

+3

Trong một số trường hợp, thiết kế đáp ứng đơn giản không hiệu quả. Trong một số trường hợp, điều này dẫn đến kích thước tài sản trang web thực sự lớn có thể dẫn đến tải ban đầu chậm. Một điều nữa là JS - đối với hầu hết các trang web hiện đại có số lượng mã JS, nhưng một số trang nội dung nặng (tập hợp tin tức, e-comerces), có thể không cần phải có tất cả loại nội dung này trên thiết bị di động, vì vậy chúng tôi có thể xóa nó ở phía máy chủ. –

1

Tính năng này thực sự không được triển khai bởi microsoft. Có vài cuộc thảo luận mở cho câu hỏi này:

https://github.com/aspnet/Mvc/issues/4877

https://github.com/aspnet/Razor/issues/751

Như một câu trả lời chung chung từ họ - sử dụng thiết kế web đáp ứng và truy vấn css phương tiện truyền thông (mà từ quan điểm của tôi không phải là câu trả lời hoàn hảo cho nhóm tự tuyên bố mình xây dựng khung web chung). Có một thực hiện cho tính năng này tồn tại như yêu cầu kéo - https://github.com/aspnet/Mvc/pull/4878

Kể từ khi yêu cầu kéo này dường như bị lãng quên, tôi trích xuất mã này vào dự án riêng biệt trong đó có sẵn trên https://github.com/laskoviymishka/MvcDeviceDetector

Bạn có thể sử dụng thực hiện này (đó là dễ dàng để thêm vào tồn tại MVC porject) hoặc thực hiện điều này chính nó. Điều này là khá dễ dàng - bạn chỉ cần thực hiện và reqister riêng IViewLocationExpander cho điều đó.

Các vấn đề liên quan