Sometimes we need to know from which device user is logged in to out application and show different content to user based on their device. So in this tutorial we are going to learn how to detect user device is Mobile, Dekstop or Tablet and show the result based on the device. For this tutorial we are going to use a package called jenssegers/agent

Setting up the Project

First you need to create a new laravel project by running below command in your terminal
1
composer create-project laravel/laravel laravel-detect-device

Then navigate to your project directory by using below command in your terminal

1
cd laravel-detect-device

Install jessenger/agent package

Now we need to install jessenger/agent composer package to our application.
1
composer require jenssegers/agent

After that, we need to configure it in our config/app.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'providers' => [

        ....
        ....
        Jenssegers\Agent\AgentServiceProvider::class,,

    ],
    'aliases' => [

        ....
        ....
        'Agent' => Jenssegers\Agent\Facades\Agent::class,
    ],
];

Create Controller

Now we need to create contoller to handle our core logic for handling our rsult and views. To create new controller: 
1
php artisan make:controller DeviceController

After that open your app/Http/Controllers/DeviceController.php and paste below code in it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Jenssegers\Agent\Agent;

class DeviceController extends Controller
{   
    /* return view based on device*/
    public function detectDevice()
    {
        $agent = new Agent();

        $mobileDevice = $agent->isMobile();
        if ($mobileDevice) {
            return view('mobile');
        }

        $tabletDevice = $agent->isTablet();
        if ($tabletDevice) {
            return view('tablet');
        }

        $desktopDevice = $agent->isDesktop();
        if ($desktopDevice) {
            return view('welcome');
        }
    }

    /* return result based on device*/
    public function detectDevices() 
    {
        $agent = new Agent();

        $mobileDevice = $agent->isMobile();
        if ($mobileDevice) {
            $result = 'This is Mobile';
        }

        $tabletDevice = $agent->isTablet();
        if ($tabletDevice) {
            $result = 'This is Tablet';
        }

        $desktopDevice = $agent->isDesktop();
        if ($desktopDevice) {
            $result = 'This is Dekstop';
        }

        return view('devices',compact('result'));

    }
}

Create View

Inside resources -> views folder create, four files called dekstop.blade.php, tablet.blade.php, mobile.blade.php & devices.blade.php. Then navigate to dekstop.blade.php and paste below code: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen sm:items-center py-4 sm:pt-0">
            <h2>This is Dekstop device</h2>
        </div>
    </body>
</html>

Then navigate to mobile.blade.php and paste below code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen sm:items-center py-4 sm:pt-0">
            <h2>This is mobile device</h2>
        </div>
    </body>
</html>

Then navigate to tablet.blade.php and paste below code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen sm:items-center py-4 sm:pt-0">
            <h2>This is tablet device</h2>
        </div>
    </body>
</html>

Then navigate to devices.blade.php and paste below code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen sm:items-center py-4 sm:pt-0">
            @if((new \Jenssegers\Agent\Agent())->isDesktop())
                <h2>{{$result}}</h2>
            @elseif((new \Jenssegers\Agent\Agent())->isMobile())
                <h2>{{$result}}</h2>
            @else
                <h2>{{$result}}</h2>
            @endif
        </div>
    </body>
</html>

Define Routes

Navigate to routes/web.php file and paste below code:

1
2
3
4
5
6
7
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DeviceController;

Route::get('/', [DeviceController::class, 'detectDevice']);
Route::get('/devices', [DeviceController::class, 'detectDevices']);

Run our application

Now we have already finished our application. Now we can run your application using below command:

1
php artisan serve

Now, navigate to http://localhost:8000 in your browser to see view based on the device & navigate to http://localhost:8000 to see result based on the device.

Conclusion

In this tutorial, we learned how show result based on the the user's device in Laravel. If you have any issue regarding this tutorial, mention your issue in the comment section or reach me through my E-mail. You can obtain complete source code for this tutorial from this GitHub repository.

Happy Coding