0

I am working in PHP, specifically Laravel.

I want to show different views according to how big the user's screen is (ex: mobile or pc). In simple words, here is what I want my routing to look like:

if (device == mobile){
    Route::view('/', 'mobile_ui');
} else {
    Route::view('/', 'desktop_ui');
}

Let me clarify that this question is not about responsive design. I just want to use two different UI templates; one for the mobile and one for the desktop.

EDIT: As pointed out by @rickdenhaan in the comments, the answer to this question can be found here: Simplest way to detect a mobile device

padawanTony
  • 1,046
  • 2
  • 20
  • 34
  • 3
    You cannot directly get the screen size using PHP as it is server side, you will need a frontend technology like JS to get the screen size and then pass it to the PHP. – Hensler Software Jan 29 '19 at 22:57
  • 1
    Isn't it possible to somehow get it through the HTTP request? – padawanTony Jan 29 '19 at 22:58
  • 1
    It is possible to make an *educated guess* based on a combination of HTTP headers ([Mobile Detect](http://mobiledetect.net/) works like this). This way you might distinguish PCs from tablets and phones, but it won't tell you the screen resolution, pixel density or physical measurements. The actual screen size is not part of the request information, this can only be retrieved using client-side scripting. – rickdenhaan Jan 29 '19 at 23:33
  • @rickdenhaan that's a good solution for my case since I do not really need the actual screen size; just desktop vs mobile. – padawanTony Jan 29 '19 at 23:40
  • @rickdenhaan please transform your comment to an answer so that I can accept it as the solution. – padawanTony Jan 29 '19 at 23:51
  • Actually, if the real question is about detecting a mobile device rather than the screen size, this is a duplicate. – rickdenhaan Jan 30 '19 at 17:11
  • @rickdenhaan you are correct. But since the other question is closed as "not constructive" and does not have an answer marked as a solution, I suggest that we keep this question and mark your answer as correct. – padawanTony Jan 31 '19 at 18:10
  • 1
    Hmm I can't retract that duplicate and flag for another one. [This question](https://stackoverflow.com/q/4117555) and [this one](https://stackoverflow.com/q/6636306) both have accepted answers and are protected by the community. – rickdenhaan Jan 31 '19 at 18:42
  • "I just want to use two different UI templates; one for the mobile and one for the desktop." — It's almost always a better idea to scrap that plan and use responsive design instead. – Quentin Jan 31 '19 at 21:39
  • @Quentin as I said in the description, "Let me clarify that this question is not about responsive design." But, please, feel free to message me to explain how I could achieve having the effect of two different templates by using responsive design and without having to actually do the design. – padawanTony Feb 02 '19 at 00:09

1 Answers1

0

Use js for that and make redirect to different route with different layout. Or you can check $_SERVER['HTTP_USER_AGENT'] variable and detect mobile device by that

Edit: I did additional digging and found this: https://github.com/serbanghita/Mobile-Detect It should solve your issue completly :)

Maciek
  • 88
  • 1
  • 9
  • How exactly? This is what I get: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36 – padawanTony Jan 29 '19 at 23:06
  • When I am on mobile I See Mozilla/5.0 (Linux; Android 9; POCOPHONE F1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.99 Mobile Safari/537.36 so you can check if string contains Android and you know user use phone – Maciek Jan 29 '19 at 23:09
  • There are millions of User-Agent combinations given that UAs change with the software and hardware. For example, a Chrome browser on an iPhone 6 will introduce itself using a different UA than a Safari browser on the same phone. Every device type, including phones, tablets, desktops, may come with its own UA. https://deviceatlas.com/blog/list-of-user-agent-strings – Hensler Software Jan 29 '19 at 23:10
  • @HenslerSoftware But won't the word 'Android' necessarily appear if we do it through an Android phone? – padawanTony Jan 29 '19 at 23:12
  • It is not perfect solution but I think it will work in most cases – Maciek Jan 29 '19 at 23:12
  • @padawanTony this means you will have to write a rule for every OS... and what about Android desktops? – Hensler Software Jan 29 '19 at 23:13
  • @padawanTony — Quite a few 60"+ 4K Smart TVs run Android and have web browsers. – Quentin Jan 31 '19 at 21:38
  • @Quentin Are you implying that using Mobile Detect (as suggested in the comments above) will not work with "60"+ 4K Smart TVs run Android and have web browsers" ? – padawanTony Feb 02 '19 at 00:10
  • @padawanTony — I'm implying that detecting Android browsers will detect a number of large-screen TVs, large format tablets, small tablets, and phones. It is not a useful measure of screen size. – Quentin Feb 02 '19 at 21:45
  • @Quentin you are correct. However, I believe that Mobile Detect solves this issue. If you find evidence that proves otherwise please post it here. – padawanTony Feb 03 '19 at 13:44