Thiết kế chủ đề Responsive: làm thế nào để trình chiếu trên máy tính để bàn / máy tính bảng và ảnh tĩnh trên thiết bị di động bằng cách sử dụng cùng một mẫu?

7

Tôi đang xây dựng trang WP đáp ứng đầu tiên của mình với Theme WP tùy chỉnh của riêng tôi. Các mẫu chính là một phần chất lỏng, một phần cố định. Điều này cho phép tôi chỉ tạo 3 "phiên bản", phiên bản dành cho máy tính để bàn, máy tính bảng và thiết bị di động. Tất cả các thay đổi xảy ra do truy vấn phương tiện truyền thông. (Kích thước từ 768 đến 1200 px cho máy tính để bàn, 530 đến 767 cho máy tính bảng, 300 đến 529 cho thiết bị di động.)

Trang chủ (có mẫu riêng) sẽ hiển thị trình chiếu. Trình chiếu tuyên bố là phản hồi (tôi chưa thiết lập nó) và tôi dự đoán nó sẽ hoạt động thông qua các kích thước máy tính bảng. Nhưng khi tôi đạt đến kích thước di động, tôi chỉ muốn có một bức ảnh tĩnh.

Tôi không muốn chỉ sử dụng "display: none" cho trình chiếu vì nó vẫn sẽ ngốn không gian / năng lượng cho điện thoại di động. Tôi muốn giữ tất cả các phiên bản trên cùng một mẫu, vì vậy tôi nghĩ rằng tôi sẽ cần một số php hoặc javascript để thực hiện điều này. (Trừ khi có một số cách khác, mà tôi rất vui mừng được nghe về!)

Bất cứ ai có thể giúp với mã? Tôi có một div slideshow trong CSS:

#slideshow { 
height: 296px; 
margin: 20px 20px 10px 20px; 
padding: 0;
background-color: #f00;
}/*by not setting a width the sshow box fills the space minus the margins*/

và trong mẫu, mã ngắn trình chiếu hoặc mã mẫu sẽ đi giữa các thẻ div trình chiếu mở và đóng. Nhưng tôi cũng muốn đặt một bức ảnh ở đó cho phiên bản di động. Vì vậy, tôi nghĩ rằng tôi sẽ cần một số loại "nếu 529px trở lên, có được trình chiếu; nếu ít hơn, có được ảnh" phải không? Tôi không phải là lập trình viên php hay javascript, tôi rất giỏi cắt và dán!

Trang web có thể xem được tại http://66.147.244.110/~rdbikeco/ - chúng tôi hiện đang ở giai đoạn thêm nội dung trang và blog cần chú ý và các thanh bên cần hoạt động, v.v. Nhưng các trang shell đang lên và nội dung đang được tải khi tôi viết.

Giúp đánh giá rất cao!

responsive

— PVA
nguồn

14

Không sử dụng trình duyệt phía máy chủ đánh hơi. Nó sẽ thất bại:

Câu hỏi ở đây là làm thế nào bạn có thể phát hiện các trình duyệt di động một cách đáng tin cậy để chuyển hướng chúng? Thực tế là: bạn không thể. Hầu hết mọi người đều cố gắng thực hiện việc này với trình duyệt đánh hơi, kiểm tra chuỗi User Agent mà trình duyệt gửi đến máy chủ với mọi yêu cầu. Tuy nhiên, chúng dễ bị giả mạo trong các trình duyệt, vì vậy chúng không thể dựa vào và dù sao chúng cũng không nói sự thật. Trình duyệt của sniffing sniffing có tiếng xấu rõ ràng, vì vậy thường được đổi tên thành Phát hiện thiết bị của Cameron trong những ngày này, nhưng đó là một khái niệm không hoàn hảo.

Các $is_iphone@kaiser biến khuyên bạn là thiếu sót (xin lỗi, kaiser, hy vọng bạn không nhớ :)).

Hãy để trình duyệt quyết định thay thế, sử dụng không gian thực sự có sẵn.
Trước tiên, thêm một metayếu tố vào đầu tài liệu của bạn để đảm bảo chiều rộng hiển thị khớp với chiều rộng của thiết bị:

<head>
    <!-- other stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,target-densitydpi=device-dpi">
</head>

Sau đó đặt mục tiêu cho nội dung thanh trượt của bạn:

<div id="dynamicimgaes">
    <img id="slideshow" src="path/to/default/image" alt="" />
</div>

Trong JavaScript, bạn có thể sử dụng độ rộng của thiết bị ngay bây giờ để quyết định xem bạn có hiển thị thanh trượt hay không.

Dưới đây là một ví dụ về jQuery (chưa được kiểm tra, vui lòng chỉnh sửa cho đến khi nó hoạt động):

<script type='text/javascript'>
if ( 480 < jQuery( window ).width() )
{
    jQuery(document).ready( function()
    {
        jQuery.get(
            'http://path/to/slider/content',
            function( data )
            {
                jQuery( "#slideshow" ).replaceWith( data );
            }
        );
    });
}
</script>

— fuxia
nguồn

Cảm ơn bạn đã phản hồi - Tôi sẽ thử kịch bản của bạn - Tôi có thể quay lại. Cảm ơn Kaiser cũng vậy!

— PVA

Không, tôi không phiền - thậm chí còn được khuyến khích :)

— kaiser

1

Câu trả lời này chỉ có ở đây vì lý do lịch sử (và vì nó được đề cập trong câu trả lời @toschos). tl; dr Đừng dựa vào những gì bạn có thể đọc dưới đây. Và đừng sử dụng wp_is_mobile().

~~chuyển đổi với một lõi toàn cầu:~~

~~if ( $is_iphone ) // do stuff for mobile else // do stuff for non-mobile.~~

~~về cơ bản, đó là phiên bản đơn giản hóa của tác nhân người dùng đánh hơi.~~

— kaiser
nguồn