адаптивный дизайн — определение разрешения и ориентации с помощью переполнения стека

Question

адаптивный дизайн — определение разрешения и ориентации с помощью переполнения стека

У меня есть этот php-код, который отображает записи в галерее. Хотелось бы, чтобы мобильное устройство было вертикально ориентировано и показывало бы только 10 изображений.

Моя идея заключается в том, чтобы включить условное в зависимости от разрешения устройства для отображения большего или меньшего количества изображений.

require_once("conexion.php");

$RegShow=20;

if(isset($_GET['pag'])){
$RegistrosAEmpezar=($_GET['pag']-1)*$RegShow
$PagAct=$_GET['pag'];

}else{
$RegistrosAEmpezar=0;
$PagAct=1;
}

Я пытаюсь создать адаптивную сеть и не очень подходит, если я помещаю так много изображений одновременно.

Моя проблема в том, что я не знаю, нужно ли было что-то обнаруживать с помощью PHP или нужно обслуживать другой файл php, используя JS, в зависимости от разрешения.

Благодарю.

0

landscape php resolution responsive-design

Решение

Другие решения

Я бы порекомендовал сделать это с CSS, это более мощный.
Вы можете использовать, например:

@media (min-width: 768px) and (max-width: 991px){ //STYLE STUFF }

создавать разные стили для разного разрешения

1

Источник

Accepted Answer

Вы должны позволить AJAX Загрузите код или изображения и вставьте его в заданный тег на стороне клиента. Вы можете получить информацию о экране из javascript и передать его PHP с помощью AJAX POST/GET просить … и действовать соответственно.

JAVASCRIPT / Jquery

$.ready(function(){
$.get("images.php?width="+$(window).width()+"&height="+$(window).height(), function(data, status){
alert("Data: " + data + "\nStatus: " + status); //or insert the returned data into some div
});

});

В images.php

<?php

require_once("conexion.php");
$width = $_GET['width'];
$height = $_GET['height'];

//Now you can retrieve accordingly..

Я надеюсь, что это даст вам достаточно для подсказки, или я должен объяснить больше … ??

1