Switch to mobile view with simple HTML
I need to switch to a mobile view of a website using plain HTML or javascript ... er, anything that doesn't require server-side scripting. Our website is temporarily hosted by Dropbox. ( http://teammetalcow.com redirects to an HTML file in a shared folder.) I need a way so that we can detect the device's user type and then display the mobile or desktop version, respectively. It would be desirable to use a simple capture method on a mobile site. Is it possible? Tons of thanks if you can help.
source to share
You can try some library like breakpoint: https://github.com/martinmartinmartin/breakpoint/ or look into this javascript: http://www.sitepoint.com/javascript-media-queries/
you just need to detect the device with javascript and then redirect.
// in case of a viewport
if (document.documentElement.clientWidth < 900) {
// scripts --> redirect
window.location = "http://www.disney.com"
}
// in case of a screen
if (screen.width < 900) {
// scripts --> redirect
window.location = "http://www.disney.com"
}
Execute
source to share
There is a lot you can do here. CSS with media queries is one solution, but a more reliable way to serve the mobile version of your site is to actually detect the device and load an alternate version of the site depending on the device type.
Apache Mobile Filter provides a really painless way to do this if you're using an Apache web server. It handles device discovery for you. Once you detect mobile devices in any way, you can redirect users to a site designed for mobile devices (served from a separate domain or subdirectory or something like that), or use whatever internal code you use to create your The site will alternatively display the mobile version of the site when a mobile device is detected (AMF will set HTTP headers telling you if the request comes from a mobile device, tablet, etc.).
There are other options, but these are probably the simplest approaches.
source to share