Switch From Desktop To Mobile

Yii 1.1 General Discussion
1

Dear members,

Is there any step by step guide to switch from desktop into mobile/tablet version of Yii application?

I have one created for desktop. What is the easy way to create mobile version?

regards

2

As I know switching on mobile version can be simply done via css rules (@media). That will change your layout regarding window (screen) resolution. Best example how does it work is bootstrap.

3

You have just to change the design of your site using @media queries in css.

and I think bootstrap framework is the best for that.

4

Check out this Theme.

It is a FREE responsive theme. It should do the magic for you.

5

When your existing site for desktop is not using a responsible css framework, then creating an alternative layout view for mobile access would be a decent solution.

In order to switch between the layouts, you can do it like the following:




class Controller extends CController

{

    public $layout = '//layout/main';

    ...

    public $is_mobile = false;

    ...

    public function init()

    {

        parent::init();

        // access from mobile browser?

        $this->is_mobile = $this->checkMobileAccess();

        if ($this->is_mobile) {

            $this->layout = '//layouts/for_mobile';

        }

        ...

    }

    ...

    private function checkMobileAccess()

    {

        $ua = $_SERVER['HTTP_USER_AGENT'];

        $is_mobile = (

            (strpos($ua, 'iPhone') !== false) // iPhone

            || ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)) // Android Mobile

            || (strpos($ua, 'Windows Phone') !== false) // Windows Phone

            || (strpos($ua, 'BlackBerry') !== false) // BlackBerry

        );

        return $is_mobile;

    }

}

In the layout view file for mobile access, you would want to

  1. Include "viewport" meta tag in the header.

  2. Include a dedicated css for mobile site in which the layout is a simple one-column layout, while the desktop version may using a traditional two- or three-column layout.

  3. Change the appearance and functionality of the menus in the layout, or sometimes totally omit some elements.

I hope these changes will make most of your pages compatible with the mobile browsers without touching your existing codes.

And, for the rest of the pages (about 20% or 30%) that still don’t look good enough for mobile browsers, you can write the dedicated view files for mobile access.




class SomeController extends Controller

{

    public function actionView()

    {

        ...

        if (!$this->is_mobile) {

            $this->render('view');

        } else {

            $this->render('view_m');

        }

    }

}

One good thing about this solution is that you don’t have to worry about the existing pages for desktop to be degraded by the changes.

6

I will not change only css, I need to change some main views too.

7

Thank U, softark for detail reply.

I already use MobileDetect extension to distinguish desktop from mobile devices.

I downloaded mobilejquery theme and now trying to build mobile views.

Instead of actionView() method I need something like filter to change "protected/views" path to something like "protected/views/mobile" in order to not change path in all $this->render methods.

8

Probably you can select a "theme" for the mobile site.

Or, CWebApp::viewPath might be a help.

I’m sorry, but I can’t tell you much about those things because I don’t have much experience in them.

9

I created folder named ‘mobile’ under themes folder and placed here all views, that are different from mobile to desktop version.

But the problem is, when I change from mobile to desktop version it shows the regular version only after refreshing page. I looked at the code. It remains with JQuery css on header, and only changes after pressing the refresh button. But when I switch from desktop to mobile version it changes view immediately.

P.S I added the button to change between mobile/desktop versions

10

I found the problem. The problem is JQuery Mobile UI. When I switch from mobile to Full Page(desktop) version

the JQuery scripts change my headers. Only after pressing refresh it loads my css files of the desktop version.

Because theme is changed but the header remains as is.