0

Sorry if this question is dumb but I am wondering how to solve it on my own. I am planning to create a website which is responsive for different screen size. To achieve this I think I would create a 2 HTML file, 1 for web and the other one 1 for mobile. The design for larger screen is different from smaller screen. My question is how can I detect if the app site is open on desktop or on mobile phone so I could distinguish what html template should I render? Any help would be much appreciated.

qazzu
  • 311
  • 2
  • 5
  • 16
  • possible duplicate of http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery – Ismail Farooq May 14 '16 at 05:33

2 Answers2

2

I would really advice to use a CSS responsive framework such as bootstrap instead of having 2 separates files, just maintaining that will take a lot of time due to having to change the code twice.

However if you still want to go down this route you can use javascript to detect the width of the browser, and depending of the result you have 2 options

  1. Redirect to a subdomain like m.domain.com
  2. Replace the html content of the page for the template you want

For first option

if (document.body.clientWidth > 767) {
     window.location = "http://m.yourdomain.com";
}

For second option

if (document.body.clientWidth > 767) {
     $('body').html(your template content here);
}
General Electric
  • 1,168
  • 2
  • 17
  • 42
1

'Responsive' web design refers to a single layout which changes using css (or sometimes javascript) based on screen size.

Rather than creating 2 html layouts you should stick with 1 and use css to assist.

Chrck out this explanation for more detail: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Michael Ambrose
  • 494
  • 3
  • 8