Virtual joystick and canvas scaler

Hi

I'm very new to Unity and have started with the rollerball tutorial. I am trying to make it work on my mobile (android) and have followed this tutorial (https://www.youtube.com/watch?v=uSnZuBhOA2U) to implement a virtual joystick and it works very well except that it is really small on my device (high resolution) and a lot bigger on my daughters (low resolution) phone. After some searching I found the Canvas Scaler and it has a "scale with screen size" that scales everything on canvas depending on screen size. It seems to be what I was after but for some reason it screws up the virtual joystick, All I can do now is move in one direction. I think it probably has something to do with the ScreenPointToLocalPointInRectangle but I don't understand anything in that code (from the virtual joysick) so I don't know what is causing the problem. I hope that someone who is familiar with coding in unity can point out whats wrong or help me find a better way of doing it (maybe there is some "standard" way of doing virtual joysticks?)

Thanks!

 using UnityEngine;
 using System.Collections;
 using UnityEngine.UI;
 using UnityEngine.EventSystems;
 
 public class VirtualJoystick : MonoBehaviour, IDragHandler, IPointerUpHandler, IPointerDownHandler {
 
     private Image joystick_bg;
     private Image Joystick_nob;
     private Vector3 inputVector;
 
     private void Start() {
         joystick_bg = GetComponent<Image> ();
         Joystick_nob = transform.GetChild (0).GetComponent<Image> ();
     }
 
     public virtual void OnDrag(PointerEventData ped) {
         Vector2 pos;
         if(RectTransformUtility.ScreenPointToLocalPointInRectangle(joystick_bg.rectTransform, ped.position, ped.pressEventCamera, out pos)) {
             pos.x = (pos.x / joystick_bg.rectTransform.sizeDelta.x);
             pos.y = (pos.y / joystick_bg.rectTransform.sizeDelta.y);
             inputVector = new Vector3(pos.x * 2 + 1, 0, pos.y * 2 - 1);
             Debug.Log (inputVector);
             inputVector = (inputVector.magnitude > 1.0f) ? inputVector.normalized : inputVector;
 
             Joystick_nob.rectTransform.anchoredPosition = new Vector3(inputVector.x * (joystick_bg.rectTransform.sizeDelta.x / 3),
                 inputVector.z * (joystick_bg.rectTransform.sizeDelta.y /3));
         }
         
 
     }
     public virtual void OnPointerDown(PointerEventData ped) {
         OnDrag (ped);
     }
     public virtual void OnPointerUp(PointerEventData ped) {
         inputVector = Vector3.zero;
         Joystick_nob.rectTransform.anchoredPosition = Vector3.zero;
     }
     public float Horizontal() {
         if (inputVector.x != 0)
             return inputVector.x;
         else
             return Input.GetAxis ("Horizontal");
     }
     public float Vertical() {
         if (inputVector.z != 0)
             return inputVector.z;
         else
             return Input.GetAxis ("Vertical");    
     }
 }