Detect if device is smartphone or tablet

Good day,

Our tablet application created with Rhomobile is working quite solid now and we continue to improve it with new features. However, we now also want to deploy the same application on smartphones. HTML and CSS have great options for that, designwise, but we also need to know what kind of device we are working with in the Ruby code. Is there a reliable way to determine this for any platform?

In a quick search I found a sollution to check for the device name. This sadly wont be an option for us, since our customers mostly bring their own devices and we dont want to keep track of all devices that these people use.

We use the RhoStudio Suite 2 and have no option to upgrade as of yet.

So far we have tried the following options with no success on the LG Nexus 4:

- Checking the property: System.get_property( "screen_width" ) (Rhomobile | System APIhttp://docs.rhomobile.com/v/2.2/rhodesapi/system-api)

This returns 768, the width in resolution of the phone.

- Checking the property: System.get_property( "real_screen_width" ) (Rhomobile | System API)

This also returns 768, the resolution width of the phone.

Could anyone help us to detect wether we are using a Smartphone or a Tablet when starting our application? (Bonus points if there can be made a diffrence between 7inch and 10inch tablets).

Wellington Oliveira
Hi Bart, try to combine css

Hi Bart, try to combine css mediaqueries and pixelratio, for example:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {

     //retina displays

}

You can change pixel-ratio and dpi resolution to detect a screen-size.

I have a device with this resolution: 1280x800 - 8.2 inchs, the same resolution in a 10 inchs have another pixel-ratio and dpi resolution.

Big screen have a low pixel ratio, you can try to detect using this features.

Other examples:

@media (orientation:portrait) and (max-height:1280px) {

}

@media (orientation:landscape) and (max-height:800px) {

}

@media (orientation:portrait) and (max-height:1024px) {

}

@media (orientation:landscape) and (max-height:600px) {

}

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
We have already implemented a

We have already implemented a similliar structure for our CSS. This works great but sadly is not the issue of this post. We need to determine in Ruby what kind of device we have.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Vinod Shankar K
I think you can detect device

I think you can detect device is 'mobile' using User agent string.

you can refer to this link Official Google Webmaster Central Blog: Mo’ better to also detect “mobile” user-agent

In Ruby you can get user agent as

request.env["HTTP_USER_AGENT"]
#or
request
.user_agent


Regards

Vinod Shankar

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
If I read the comments on

If I read the comments on that article, there are already people complaining that it doesn't work for iOS devices, since the iPad returns mobile aswell... I think that might also be the case with specific manufacturor versions of the Android os. It would (sadly) not be the first time the Samsung OS version has diffrences with the normal Android OS...

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Jon Tara
There is generally no

There is generally no reliable way to detect phone vs. tablet. It's an arbitrary distinction, unless you do match to specific hardware.

iOS is rather easy, since there are a limited number of models. And you can just look for iPad in the model.

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


David Miller
http://wurfl.sourceforge.net

http://wurfl.sourceforge.net/

You could do it with wurfl. Would need internet access though and a server response.

Sent from my iPhone

Vote: 
Vote up!
Vote down!

Points: 1

You voted ‘up’


Bart Fukkink
I have found this sollution

I have found this sollution aswell and I have to say it is a really nice project! Sadly, one of the key features of our application is "Work offline". Some of our users will be in area's where there is no reliable internet connection, like deep cellars, and they can still work with our application from there. Something as crucial as this (starting up in the right version) can not be required to have an internet connection when starting the application.

Still marking it as usefull since this can surely be usefull to a lot of people without the requirement that the user needs to be online.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
I found some things about iOS

I found some things about iOS aswell that will probably work like you posted there.

Is there not a way to find out the screen size in inches? Or calculate it somehow?

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
Took some fiddling, but we

Took some fiddling, but we came across a property called "ppi_x" and "ppi_y" in the documentation. These are the pixels per inch. Combined with the screen resolution and some maths (Pythagoras - Wikipedia, the free encyclopedia) we can then (roughly) work out how big the screen is.

Our implementation:

def screen_diagonal

# Get the pixels per inch horizontal

ppi = System.get_property( "ppi_x" )

# If thats nil, try get the ppi vertical

ppi = System.get_property( "ppi_y" ) if !ppi

 

# Get screen width and height

width = System.get_screen_width

height = System.get_screen_height

 

# Use some Pythagoras magic

square_w = width * width

square_h = height * height

       

# Get the diagonal in pixels

diagonal_p = Math.sqrt( square_w + square_h )

 

# Divide that through the pixels per inch and you got the diagonal.

diagonal_inches = diagonal_p / ppi

 

return diagonal_inches

end

We check this method when starting our application. The result is roughly the diagonal in inches of the screen that you have to work with. Should that number be above 6, we show the tablet version of our application, otherwise we show the smartphone version.

Feel free to use this. It is tested on Android devices (LG Nexus 4, HTC One, Samsung Galaxy Tab 2 and the Motorola ET1). I do not guarantee it will work for everyone, but it should get you in the right direction.

Thanks for the tips leading to this sollution

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Nrusingha Patro
Hi,Rho.System.get_property( "

Hi,

Rho.System.get_property( " device_name" ) can be used to get the device name.

For more information , please refer the below link

http://edgedocs.rhomobile.com/v/2.2/rhodesapi/system-api

if you are using RhomobileSuite 4.0 (latest release) then same can be achieved using

Rho.System.deviceName

Regards,

Patro

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Bart Fukkink
That would be a sollution if

That would be a sollution if you want to restrict the devices used by your customers. In our case, we dont want that. If the customer says: We want to use device X. We say, go ahead, it might work, but we havn't tested it on that specific device.

Then we can work with our customers to tweak little things for the device if needed. In this case, it is not an option we can work with.

Vote: 
Vote up!
Vote down!

Points: 0

You voted ‘up’


Log in to post comments