Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How do we get the browser to switch to a mobile version of our site when using a mobile phone?

Posted on 2014-03-06
7
Medium Priority
?
195 Views
Last Modified: 2014-03-08
I have a site, that we would like to switch to a mobile version when users viewing from a mobile browse on phones.  looking for info on how to do this
0
Comment
Question by:bmanmike39
  • 2
  • 2
  • 2
  • +1
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39910997
You need to design a responsive version of your site or build a mobile version of your site that will only show on mobile devices
Multiple frameworks are available for designing a responsive site like Bootstrap
0
 

Author Comment

by:bmanmike39
ID: 39911007
I know that,  How do we make it switch over or detect if its a mobile device or not?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39911024
A responsive website does that automatically based on CSS media queries.
If you are designing a separate mobile site then you need to use javascript to detect the browser/device and redirect to the mobile version
0
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39911028
Ideally, you don't detect mobile. You simply design a site that will adjust itself according to the measurements of the viewport. Frameworks like Bootstrap will do this for you automagically. In the very worst case, you rely on user-agent detection, but this is unreliable and a brittle design. Stick with a framework that yields a responsive design. There might be a learning curve, but it will often be less work in the end.
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 39911379
My customer chose this method based on screen size to give them a choice.  A lot of 'mobile' devices have screens large enough to use the desktop sites.
<script type="text/javascript">
<!--
var t1=screen.width;
var t2=screen.height;
var t5=screen.availWidth;
var t6=screen.availHeight;
function myFunction()
{
if(t1 < 484 || t2 < 484) {
	var r=confirm("We have an alternate view for smaller screens.  Would you like to try it?");
	if (r==true)
  	{
	  window.location.assign("http://www.yoursite.mobi/")
  	}
	}
}


// -->
</script>
</head>
<body onload="myFunction()">

Open in new window

0
 

Author Closing Comment

by:bmanmike39
ID: 39915293
Thanks!
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39915403
You're welcome.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question