Cách tốt nhất để sử dụng Truy vấn phương tiện cho thiết kế di động

Question

Tôi biết truy vấn phương tiện là gì và tại sao chúng được sử dụng, nhưng tôi không chắc chắn cách tốt nhất để phát triển trang web trên thiết bị di động.

Ví dụ: Tôi có mysite.com có ​​một biểu định kiểu với tất cả các kiểu cần thiết (giả sử đó là một tệp khá lớn). Tại thời điểm này, không có kiểu nào của tôi nhắm mục tiêu độ phân giải màn hình thấp hơn hoặc các thiết bị khác.

Sau đó, tôi quyết định tạo phiên bản di động cho trang web của mình. Để dễ dàng hơn, tôi sẽ chỉ nhắm mục tiêu người dùng iPhone ngay bây giờ và nếu mã phát hiện ai đó truy cập trang web của tôi trên iPhone, họ sẽ nhận được phiên bản di động.

(Các) câu hỏi của tôi: Vị trí tốt nhất để bao gồm các kiểu bổ sung này để người dùng thấy phiên bản di động ở đâu? Tôi có nên bao gồm các kiểu này trong bảng kiểu gốc hay không, hoặc tốt hơn nếu tôi tách chúng ra thành trang mẫu của riêng mình?

Giả sử trang web của tôi được xây dựng hoàn toàn bằng phao, nhưng phiên bản di động của tôi sẽ chỉ hiển thị mọi phần tử xếp chồng lên nhau. Làm cách nào để hiển thị rằng sử dụng truy vấn phương tiện? Nó đơn giản như tuyên bố nổi: không; hay gì đó? Về cơ bản, những gì tôi đang cố gắng yêu cầu trong đoạn trên là, làm cách nào để xây dựng biểu định kiểu của mình để ví dụ, màu cơ bản và vị trí liên kết hoặc bất kỳ thứ gì tồn tại trong phiên bản di động như trong màn hình nền phiên bản nhưng với sự khác biệt như xếp chồng mọi thứ trên đầu trang của nhau trong phiên bản di động?

Các quy tắc trong phần truy vấn phương tiện của một biểu định kiểu cơ bản là 'vượt quá' những gì bạn đã khai báo trong phần truy vấn không phải là phương tiện truyền thông?

Tôi đã tìm thấy nhiều ví dụ về cách sử dụng truy vấn phương tiện nhưng tôi không thể tìm thấy ví dụ hoạt động của trang web đầy đủ. Nếu tôi có mobile.css và main.css được liên kết trong cùng một trang HTML, cách chúng hoạt động cùng nhau để giữ lại một số khía cạnh của trang web của tôi trong phiên bản trên thiết bị di động nhưng thay đổi các trang khác?

Câu hỏi cuối cùng: có thể có thiết kế chiều rộng cố định hoàn toàn không nhưng vẫn sử dụng truy vấn phương tiện? Mã sẽ vẫn có thể phát hiện khi trình duyệt thu nhỏ hoặc mở rộng qua một chiều rộng/chiều cao nhất định, đúng không?

Xin lỗi vì câu hỏi dài và có thể gây nhầm lẫn. Tôi hy vọng bạn có thể nói những gì tôi đang cố gắng hỏi.

Answer 1

Có (ít nhất là) bốn cách để làm điều này:

1. Bình thường CSS, với các truy vấn phương tiện truyền thông ở phía dưới (vì vậy họ ghi đè CSS ở trên)
2. Hai (hoặc hơn) các file CSS nạp sử dụng truy vấn phương tiện truyền thông trên các yếu tố liên kết
3. máy chủ phát hiện bên đó thêm các liên kết khác nhau CSS trong HTML
4. server side phát hiện sau đó chuyển hướng sang m.example.com, hoặc example.com/mobile

Nếu bạn đang nói những thay đổi nhỏ (phao: không, kích thước phông chữ khác nhau, v.v) thì tôi muốn đi 1. Nếu có rất nhiều thay đổi đối với CSS, tôi sẽ sử dụng 2 hoặc 3 (3 isn 't là tốt, khi bạn dựa vào useragents, chứ không phải là thuộc tính màn hình). Nếu HTML và CSS thay đổi, tôi sẽ sử dụng 4.

Đối với tất cả điều này, hãy kiểm tra công việc của bạn trong Internet Explorer 6-8, họ có thể bỏ qua truy vấn phương tiện và sử dụng tất cả CSS, bao gồm cả các bit di động nếu bạn sử dụng 1.

Có một cái nhìn tại http://mediaqueri.es/ cho một số ví dụ về các trang web sử dụng 1 và 2.

Dưới đây là một nguồn tài nguyên có thể giúp: https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

Answer 2

Tôi muốn giới thiệu tùy chọn 3.

Tác nhân người dùng đánh hơi để phát hiện thiết bị không phải là xấu. Nó đã là một hằng số cho việc tạo ra các trang web di động trong nhiều năm nay. Sử dụng PHP device detection, bạn có quyền kiểm soát nhiều hơn đối với trang web của mình trên các thiết bị khác nhau. Bạn không chỉ có thể chọn những tệp CSS nào đi đến thiết bị nào, bạn cũng có thể chọn nội dung/đánh dấu nào được tải cho mỗi danh mục thiết bị; di động, máy tính bảng, máy tính để bàn, tv, v.v.

Với phương pháp này, bạn có thể đảm bảo điện thoại di động không nhận được nội dung/phong cách/đánh dấu trên máy tính để bàn và ngược lại, ngay cả khi JavaScript bị tắt.

Answer 3

Tôi khuyên bạn không nên đánh lừa xung quanh bằng trình duyệt trên thiết bị di động/thiết bị di động; đây là nơi truy vấn phương tiện truyền thông nổi bật. Hãy suy nghĩ hữu cơ hơn và thay vì phải cập nhật liên tục trang web của bạn với các thiết bị và trình duyệt di động mới, chỉ cần sử dụng một tệp CSS và sử dụng chiều rộng tối đa/chiều rộng tối đa của thiết bị CSS3.

Nơi <meta name="viewport" content="width=device-width"/> trong tiêu đề của bạn, và trong file CSS của bạn phân tích nó thành một phiên bản máy tính để bàn và một phiên bản di động:

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

Answer 4

tôi sẽ không khuyên bạn nên lựa chọn 3. Sniffing đã được chứng minh trong một thời gian lựa chọn xấu và thời gian lần nữa. Điều gì xảy ra khi một thiết bị/trình duyệt trình bày thông tin sai? Nó dễ bị tấn công.

Đừng làm điều này. Truy vấn phương tiện tất cả các cách. Đây là tiêu chuẩn được hỗ trợ.