tra-loi-cau-hoi-phat-trien-web.com

Thực hành tốt nhất để phát hiện chiều rộng màn hình ở phía máy chủ là gì?

Tôi có một mô-đun xuất ra 1 mục theo mặc định, trong tệp help.php của nó, có một cái gì đó như

$items = 1;
$db->setQuery($query, 0, $items)

Bây giờ tôi muốn phát hiện xem chiều rộng màn hình của người dùng có nhỏ hơn một giá trị nhất định hay không, nếu có, thì chỉ nhận được 1 mục, nếu không thì nhận được 4 mục. Thực hành tốt nhất để làm điều đó là gì?

Tôi chỉ có thể đặt $ items thành 4 và sử dụng javascript để loại bỏ 3 mục khác, nhưng đây không phải là một giải pháp hoàn hảo vì dữ liệu quá mức sẽ được tải xuống. Câu hỏi của tôi là: 1) can PHP một mình phát hiện chiều rộng màn hình của khách hàng? 2) Nếu không và tôi phải sử dụng javascript/ajax, tôi đang nghĩ thêm

<script>
    var w = screen.width;
    href = location.href;
    if (location.search){
       href = href + '&screenWidth=' + w;
    } else
    href = href + '?screenWidth=' + w;
</script>

đến mọi trang và sử dụng $_GET['screenWidth] để lấy giá trị độ rộng màn hình trong tệp helper.php, đây có phải là một cách thực hành tốt không? Điều này sẽ gây rối với bộ đệm đầu ra (nếu có)?

2
shenkwen

PHP không thể phát hiện kích thước màn hình, vì nó chạy trên máy chủ. Tôi cũng sẽ không sử dụng ajax cho những thứ như thế này.

Sử dụng Khả năng phát hiện trình duyệt của Joomla với JApplicationWebClient lớp và điều chỉnh php/truy vấn của bạn cho các thiết bị khác nhau, không dành riêng cho các kích thước màn hình khác nhau.

Mã mẫu:

$client = JFactory::getApplication()->client;
$client->browser;
$client->mobile...

Một số suy nghĩ về bình luận cuối cùng của bạn:

Và tôi không hiểu tại sao mọi người có xu hướng phát hiện loại thiết bị thay vì chiều rộng màn hình. Trong hầu hết các trường hợp (tôi thường chỉ bố trí) Tôi gặp phải, tôi không quan tâm người dùng đang sử dụng thiết bị gì, nhưng chỉ có chiều rộng màn hình ....

Không phải là không thể làm điều đó với AJAX. Nhưng xem xét mối quan tâm ban đầu của bạn về việc lưu dữ liệu quá mức ... điều gì sẽ là vấn đề nếu sau mỗi lần thay đổi kích thước màn hình - ngay cả khi bạn trì hoãn để thay đổi kích thước được thiết lập hơn một chút, bạn sẽ có yêu cầu mới để tải xuống dữ liệu (thậm chí nếu điều này xảy ra trong nền và và ngay cả khi bạn lấy chúng từ bộ đệm). Bạn sẽ kết thúc ít nhất với cùng một lượng dữ liệu. Vậy thì tại sao không làm điều đó ngay từ đầu ở phía máy khách với CSS?

Một điều nữa, là sau khi thay đổi kích thước màn hình (giả sử người dùng chuyển thiết bị di động của mình từ dọc sang ngang), việc tải lại dữ liệu có thể mang lại các mục khác nhau, nếu có sự thay đổi trong cơ sở dữ liệu. Người dùng có thể bị nhầm lẫn và sẽ phải tìm kiếm các mục mà anh ta đã có trước đó trong màn hình của mình.

Tất nhiên, có thể có tùy chọn để đi và chỉ định các trường hợp khi nào một yêu cầu dữ liệu mới sẽ xảy ra ... Nhưng tại sao tất cả những rắc rối này?

4
FFrewin

Nếu là tôi, tôi thực sự sẽ tiếp cận điều này khác đi.

Tôi sẽ luôn nhận được 4 mục :

$items = 1;
$db->setQuery($query, 0, $items);
$rows = $db->loadObjectList();

Hiển thị tất cả :

foreach ($rows as $row)
{
    echo '<div class="item_"' . $row->id . '>' . $row->item . '</div>';
}

Sẽ xuất ra :

<div class="item_1">
    // row data
</div>
<div class="item_2">
    // row data
</div>
<div class="item_3">
    // row data
</div>
<div class="item_4">
    // row data
</div>

Sau đó, sử dụng truy vấn phương tiện CSS3 để ẩn 3 trong số đó :

@media (max-width: 767px) {
    .item_2, 
    .item_3,
    .item_4 {
        display: none;
    }
}

Cách tôi đã hiển thị dữ liệu hoàn toàn là một ví dụ và khái niệm.

Tôi luôn ưu tiên sử dụng phía máy khách để phát hiện độ rộng màn hình (cách thực hiện) và hiệu suất cũng tốt hơn.

Hi vọng điêu nay co ich

1
Lodder

Thực hành tốt nhất? Thực hành tốt nhất là không cố gắng xác định kích thước màn hình , vì cuối cùng nó là vô ích. Điều gì sẽ xảy ra khi một người dùng màn hình lớn thay đổi kích thước cửa sổ trình duyệt của họ, ví dụ?

Nếu bạn muốn sửa đổi bố cục , liên quan đến kích thước màn hình trên thiết bị người dùng, hãy thực hiện với thiết kế web đáp ứng.

Nếu bạn lo ngại rằng số lượng mục nội dung bạn phân phối theo mặc định là không phù hợp với thiết bị di động, thì bạn nên giảm mặc định và luôn luôn cho rằng thiết bị di động trong trường hợp đầu tiên; phát triển di động đầu tiên đặc biệt giải quyết các vấn đề như thế này.

Nếu bạn muốn sau đó cung cấp cho người dùng màn hình lớn nhiều mục nội dung hơn thì bạn nên xem tải có điều kiện đáp ứng các kỹ thuật để kéo vào các mục có kích thước máy tính để bàn bổ sung.

1
Seth Warburton