javascript — Laravel — включать файл, только если размер экрана & gt; 768px
У меня сложная ситуация, когда мне нужно переместить мои объявления Google на мобильных устройствах. Я понял, что лучший способ сделать это — вызвать их с помощью @include, но только при соблюдении определенных условий размера экрана.
Я думаю, что следующее будет работать
@if($screensize < 768px)
@include('partials.my-advert')
@endif
Итак, мой вопрос, как мне получить размер экрана в PHP? Я могу получить размер экрана через JS, используя $(window).width(); но тогда как мне использовать это значение в операторе Laravel if?
Решение
Вы не можете определить размер экрана с помощью PHP, но вы также можете обнаружить агентов. Eсть пакет, который легко обнаруживает агентов, где позволяет определить, поступает ли запрос с настольного компьютера / планшета / мобильного телефона.
Чтобы установить его через composer, вы можете запустить команду ниже.
$ composer require jenssegers/agent
Затем добавьте dd поставщика услуг в ключ поставщика в файле config/app.php,
Jenssegers\Agent\AgentServiceProvider::class
Кроме того, добавьте псевдоним агента к ключу псевдонимов,
'Agent' => Jenssegers\Agent\Facades\Agent::class
Наконец, передайте переменную агента из вашего контроллера для просмотра.
$agent = new Agent();
return view('some.view', compact('agent'));
Затем, по вашему мнению, вы можете проверить, принадлежит ли агент к какому-либо мобильному телефону или нет.
@if($agent->isMobile())
@include('partials.my-advert')
@endif
Другие решения
Нет абсолютно никакого смысла пытаться сделать это таким образом, потому что весь этот подход устарел. Конечно, вы могли бы передать $(window).width() с клиента в javascript обратно на сервер в PHP, но что тогда произойдет, если пользователь изменит размер своего окна?
Вот почему сегодня поощряется то, что адаптивный дизайн. Четное Google Adsense имеет адаптивные рекламные блоки за это.
Адаптивный дизайн не требует, чтобы back-end знал что-либо о клиенте, чтобы правильно отображать вещи на странице. Вместо этого клиент не делает никаких предположений о том, как контент отображается на клиентском UA, и позволяет продвинутым CSS и JS напрямую и быстро реагировать на рендеринг. Это означает, что ваш контент никогда не меняется независимо от размера экрана.
начальная загрузка это одна из таких интерфейсных сред, которая использует адаптивный дизайн. Там также Материальный дизайн, у которого есть много реализаций которые также отзывчивы.