Differentiate between phones and tablets

[jesusto]

Hi all,

I would like that mobile template is used only when a  phone is detected and continue using the desktop template for tablets.

Does anyone know how to achieve this?

Thanks in advance

[datahell]

Bad idea. The distinguise between a tablet/mobile device and a desktop one is not only a matter of screen size. If you have a mini laptop with 12 inch monitor and a tablet with 11 inch, the screen might look the same but they are totally different devices mostly because they are handled differently. On one side you have a touch screen and on the the other a standard monitor with a keyboard. These 2 devices should be handled differently else you will have browsing issues. So I strongly recommend you not to do this.

[jesusto]

I understand.

What about apliying a different css for tablets then, how can I do that?

I like mobile template very much for phones but I would like something different for the ipad, for example.

Thanks

[datahell]

You detect devices via css media rule. You can't detect the exact device, only via its width/height parameters. For iPad this will do the work:

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .mpla { color:red; }
}
@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .mpla { color:green; }
}

[seadhna]

Hi there,
I have the same question but not understanding completely - how do we stop the mobile version coming into effect for tablets?
I understand the pitfalls, but the mobile version is not suitable at all for tablets in this particular instance.
thanks!

[datahell]

You have 2 options:

1. Enable mobile device detection and use a special template (mobile.php) for mobile phones, tablets, ipods, etc. In this case Elxis also generates different HTML output. To exclude tablets from this option you have to modify the detection function.

Helper: browser (class elxisBrowserHelper)
Method: isMobile
File: includes/libraries/elxis/helpers/browser.helper.php

Method sample usage:
$elxis->obj('browser')->isMobile(); //returns true/false

2. Disable mobile device detection and handle layout and styling via CSS media rules. Elxis 4.2 and template Flex does exactly this.

My advice is to keep tablets treated like mobile phones. There are both touch devices with limited functionality and there are 7 and 8 inches tablets which are not much bigger than smart phones. So these devices should be handled the same. With media rules you can do many tricks the way I show you on my previous message.

[seadhna]

Great, thanks!