Отзывчивый дизайн + методы RESS

Question

Мне интересно, если что-то похожее на это можно легко сделать в if/else PHP или Javascript. Я читал о обычных методах ress, и я пытаюсь найти решение, которое не зависит от обнаружения устройства, такого как WURFL. Возможно, то, что я ищу, называется «условная загрузка»?

Моя цель - загрузить только соответствующую разметку на основе ширины экрана точно так же, как и запрос на мультимедиа. Например, я мог бы создать полную навигацию для больших экранов и простой мобильный интерфейс для небольших устройств/экранов. Это позволит сэкономить массу полосы пропускания и сделать сайт по-настоящему гибким. Спасибо за ваш вклад!

{ if < 768 } 
some code here {html, php, etc} 
{/if} 
{ if > 768 } 
some code here {html, php, etc} 
{/if} 

Answer 1

Вы можете использовать element.clientWidth для устройства ширины и window.screen.width. Другим подходом будет window.matchMedia, который доступен практически в каждом браузере.

Answer 2

Существует несколько способов, которыми эти конструкции могут быть выполнены. Javascript и php могут использоваться, но будут иметь свои керки.

Вы сказали, что не хотите проводить тестирование агента пользователя, чтобы исключить PHP. Вы можете использовать php для проверки пользовательского агента, выполнив $_SERVER['HTTP_USER_AGENT'] и тестирование для IPhone и т. Д., Если хотите, а затем отобразить контент, который вы хотите, в условном заявлении.

Javascript может быть использован для проверки размера экрана с помощью

window.screen.availWidth AND window.availHeight

Это вернет доступную высоту для браузера, который может быть занят вашим веб-браузером. Для использования в полном разрешении window.screen.width AND window.screen.height

Это работает в большинстве браузеров, но поставляется с одной проблемой. В зависимости от соотношения глубины пикселей вы не сможете вернуть разрешение экрана ACTUAL. Например, я использую mac, у которого есть сетчатка экрана. В приведенном выше javascript показано, что ширина и высота экрана составляют 1280x800, когда на самом деле это 2560x1600 или 2x возвращаемое значение. Вы можете это исправить, тестируя для яблочных продуктов с сетчатыми экранами и умножая на два. Тем не менее, его глубина пикселей не влияет на пропорции объектов на веб-сайте, она просто делает изображения и видео, которые не являются hidpi, выглядят размытыми или пиксельными.

Надеюсь, это поможет.