When I do var_dump(HTTP_USER_AGENT) on my google screen selecting the devices IPAD and IPAD PRO I get this:
Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1
Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1
Theres no difference between these two while the resolution is different for each. I need to load a file depending on if its ipad or its ipad pro.
How can I achieve this?
Well, you have to set different stylesheet rule for differentiating device sizes
<html>
<head>
<link rel="stylesheet" media="all and (max-device-width: 1668px) and (device-height: 2388px) and (orientation:portrait)" href="ipad-pro-portrait.css" />
<link rel="stylesheet" media="all and (max-device-width: 1668px) and (device-height: 2388px) and (orientation:landscape)" href="ipad-pro-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
</head>