7

Im pretty sure this question must have been asked before but I cant find anything. I would like to create 2 versions of my website one where the mobile version is displayed in a subdomain such as m. and then the regular version for desktop.

Ive searched SO, a similar question is asked here, but no direct answer is given rather it only talks about advantages and disadvantages, which at this stage does not concern me.

Ive searched the web and came across a post from Mozilla where they mention the use of user-agent-detection but I cant for the life of me find a good example (perhaps im typing wrong queries)

If anyone can provide me with an example / or a good link with how I can serve two different websites based on browser view-port size it would be greatly appreciated.

Community
  • 1
  • 1
Timothy Coetzee
  • 5,626
  • 9
  • 34
  • 97
  • Is your website comprised of static pages or are you using a backend as well? If so, which backend? – leroydev Mar 01 '17 at 08:30
  • Using php for backend, why does it matter? – Timothy Coetzee Mar 01 '17 at 08:37
  • 1
    As a side remark, I want you to be aware of what responsive design is so that the choice for doing this is a well founded one. – Peter Mar 01 '17 at 08:51
  • Hey @Peter, the website has already been created, however it is only optimized for desktop! It will be quicker and easier for me to just redesign it for mobile and add it to subdomain compared to redesigning the whole site! – Timothy Coetzee Mar 01 '17 at 08:54
  • 1
    Hey @Timothy, I feel your pain :-) Good luck! – Peter Mar 01 '17 at 08:59
  • While this can be done on the client (with js), it is much more sensible to do it on the server. When done on the client, it first loads the entire desktop version before redirecting to the mobile version. If done on the server, it sends the mobile version immediately, saving loading time and data transferred. This would also allow you to use the same domain for both (if you wish), but sending different HTML to mobile devices – Suppen Mar 12 '17 at 17:21
  • @Suppen very good point! For future readers of this question I would like to point to this brilliant mobile detection script hosted on GitHub. https://github.com/serbanghita/Mobile-Detect/wiki/Code-examples – Timothy Coetzee Mar 13 '17 at 06:39

2 Answers2

1

Assuming you are not using any framework, use this code : 

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};



if (window.mobilecheck() == true) {
    window.location = "http://m." + window.location.host
}

Of course, this mobilecheck function was taken from this question enter link description here

Community
  • 1
  • 1
CarlJ
  • 26
  • 1
  • WOW that is an insanely long check, i was thinking more in the line of an htaccess check or similar, but your answer is very helpful thank you – Timothy Coetzee Mar 01 '17 at 08:52
-1

In ASP.NET, you could implement it like this: 

if (Request.Browser.IsMobileDevice == true)
{
     Response.Redirect("http://m.domain.com");
}
Mikhail Tulubaev
  • 4,141
  • 19
  • 31
Yogesh Singh
  • 1
  • 1