Laravel detect mobile/tablet and load correct views

Question

I have read how to add different paths or namespaces for views, but I think this is not a proper solution for me. What I would like to do it's to set a view base path for mobile devices and a different one for desktop devices, so in the view controllers I don't need to make any change.

That would be great to set the path in the routes file and don't touch any view controller. Any ideas for that? Maybe just Config::set the view path?

Thanks in advance! :)

Answer 1

For you Laravel users in the future who are looking for a way to detect devices in the view; another option is to create a ServiceProvider - and then use View::share() - which will then make the device-detecting $agent available inside all of your views.

Install Agent

composer require jenssegers/agent

Create the service provider

php artisan make:provider AgentServiceProvider

In config/app.php

App\Providers\AgentServiceProvider::class,

in app/providers/AgentServiceProvider.php

<?php

namespace App\Providers;

use View;
use Jenssegers\Agent\Agent;
use Illuminate\Support\ServiceProvider;

class AgentServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $agent = new Agent();

        View::share('agent', $agent);
    }

    public function register()
    {
        //
    }
}

Then inside your views

@if ($agent->isMobile())
    
    Show mobile stuff...

@endif

2022 Update

It appears the Agent package has been abandoned... But, there is an alternative which is even easier to use.

https://github.com/riverskies/laravel-mobile-detect

Just install the package...

$ composer require riverskies/laravel-mobile-detect

...and start using it in Blade. No set up at all!

@mobile
    Show mobile stuff...
@endmobile

@tablet
    Show tablet stuff...
@endtablet

@handheld
    Show mobile and tablet stuff...
@endhandheld

Note that you might have to run php artisan view:clear to have the new Blade directives take effect.

Answer 2

I'm looking at the same issue here, basically wanting to "bolt on" a directory of mobile views without messing with my controllers (if possible).

One place to do this may be the config in app/config/views.php:

<?php

use Jenssegers\Agent\Agent as Agent;
$Agent = new Agent();
// agent detection influences the view storage path
if ($Agent->isMobile()) {
    // you're a mobile device
    $viewPath = __DIR__.'/../mobile';
} else {
    // you're a desktop device, or something similar
    $viewPath = __DIR__.'/../views';
}


return array(
    'paths' => array($viewPath),
    .....

seems to work, giving you a completely different directory to work from.

I'll continue to experiment, as perhaps there will be some overlap between the desktop and mobile includes, but we'll see.

PS: Agent ~= Mobile_Detect

Answer 3

You could create two folders mobile, desktop inside your view folder. The two folders hold the same views (only the filenames).

├── views
|   ├── mobile
|   |   ├── main.blade.php
|   └── desktop
|       ├── main.blade.php

Then inside your controller you can use the folder names to switch between the desktop and mobile views (or any other if you add more).

You only need to resolve the request's device through PHP. You can do it with this project: http://mobiledetect.net/.

Now your controller looks like:

public function getIndex() {
    $detect = new Mobile_Detect;

    return View::make( ($detect->isMobile() ? 'mobile' : 'desktop') . '.your-view-name' );
}

It's offcourse a good idea to refactor the ($detect->isMobile() ? 'mobile' : 'desktop') to a helper/static function. Or register it as an config item in a before route filter.