Laravel:端末によって表示内容を変える方法

Laravel:端末によって表示内容を変える方法

作成中のシステムは基本的にPCでの操作を念頭に作り込んでいます。

現段階で商品検索機能は完成したのですが非常に便利で「検索などの機能は倉庫でも使いたい!」と思うようになりました。倉庫で使えれば詳細情報の有無確認して実測できます。

ただ、パソコンでの表示を考えて作ってしまったため、改行で崩れる箇所が複数あります。

単純なテーブルやリストなんかだと【%】でクリアできるのですが、タブ切替の情報集約ページなどはタブ名が枠に収まらず大きく表示崩れしてしまいました。

端末による表示切替えが簡単に出来れば...。

そんな方法を見つけたので備忘録に記します。

LaravelではRequestが端末情報を持っている!

すっごく便利です。

LaravelではRequestが端末情報を保持しているので、呼び出して分岐させるだけで簡単に構築出来てしまいます。

■コントローラー

    public function edit($id,Request $request)
    {
        //端末判断
        $user_agent =  $request->header('User-Agent');
        if ((strpos($user_agent, 'iPhone') !== false)
            || (strpos($user_agent, 'iPod') !== false)
            || (strpos($user_agent, 'Android') !== false)) {
            $terminal ='mobile';
        } else {
            $terminal = 'pc';
        }
        return view('items.edit', 
                compact
                    (
                        'terminal'
                    )
                );
    }

■ビュー

    @if($terminal ==='pc')
        PCです。
    @else
        スマホまたはタブレットです。
    @endif

まとめ

本格的にスマホ画面とPC画面を作り込もうと思った場合は Bootstrap でグリッドシステムを作り上げるのがベストですが、簡易的な振分けなら上記方法で完了!

すっごく簡単でした。

\ 最新情報をチェック /

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください