Mobile device discovery solution
Check out Detection of Mobile Browsers . There are a number of scripts for different languages, including JavaScript, which can be used to enable different behaviors when a mobile browser is detected.
Scripts, by default, will load a different URL if a mobile browser is detected. It is designed to download the mobile version of your site if a mobile device is detected.
However, with a little modification, you can use the script to set a “flag”, which you can use to determine whether to perform different behavior, but at the same time load the same website for all devices. I changed the code below using the alert("mobile detected") placeholder entry below:
isMobile=false;(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|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|e\-|e\/|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))alert("mobile detected")})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');
At the end of this script, where it says alert("mobile detected") , just replace it with isMobile=true . If the script detects a mobile browser, this flag will be set to true.
I left a warning there so you can run the script with different devices to see the warning.
Form Factors and Design Tips
Now I want to note that the form factors for mobile devices, tablet and desktop are very different. In addition, user interactions with these three form factors are also very different. This may mean that creating one website for all three platforms can either damage usability or prevent you from creating a better user interface for all three platforms.
In my experience, the mobile and tablet websites I used were designed specifically for these devices. In other words, it was not just existing websites or web applications that someone changed to try to make things “suitable” for mobile and tablet platforms.
Instead, the mobile and tablet versions of these highly usable websites were developed from scratch regardless of the desktop version, so updates, corrections, design changes, etc. could be done for only one platform, so that they can diverge independently of each other, in order to match the use cases for users on each platform.
For example, I recently created two web forms, one designed for desktop browsers and the other designed for mobile browsers. The desktop version is in one HTML file, and the mobile version is in another HTML file. The mobile version uses jQuery Mobile, so it has touch, slide and other features that make interacting with the site enjoyable on mobile devices. It also looks more like a mobile application and feels more “native”. The desktop version has more user interface elements that include mouse clicks or keyboard shortcuts and look more like a website than a mobile application.
Since I don’t know the exact details of your application, you will of course want to take a look at what you are doing and ask yourself whether it will be easier and more convenient if you created mobile / tablet versions that are not dependent on the desktop version.