11 Replies Latest reply on Oct 16, 2013 2:39 AM by Bart Fukkink

    Detect if device is smartphone or tablet

    Bart Fukkink

      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).

        • Re: Detect if device is smartphone or tablet
          Wellington Oliveira

          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) {
          
          }
          
          • Re: Detect if device is smartphone or tablet

            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

              • Re: Detect if device is smartphone or tablet
                Bart Fukkink

                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.

              • Re: Detect if device is smartphone or tablet
                Bart Fukkink

                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