We Keep Coding

how to make a website change based on device?

so i wanted to make my website load differently on desktop and mobile. The code below detects whether its loading on mobile or desktop. Is there any way i can replace the you are using moblie text to a whole new html code so that when the website loads on mobile instead of showing you are using mobile it load a new html website meant for mobile?
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var element = document.getElementById('html');
if (isMobile) {
element.innerHTML = "You are using Mobile";
} else {
element.innerHTML = "You are using Desktop";
}
</script>

to redirect to another html page just use window.location='https://yourmobileurl.com' in your if statement or window.location='https://yourdesktopurl.com' in the else
HOWEVER, a better way to design this is to use media queries

Using window.location.hash and anchor tag on mobile

I have a javascript function that, on click, will link to an id on the page.
$(document).on('click', '.quiz-modal-close-label', function() {
window.location.hash = '#more-quizzes';
});
My HTML looks like this:
<aside id='more-quizzes' class='col-xs-12 col-md-3 more-quizzes-container'> ...
On desktop it works. In Chrome mobile inspector it works. But on mobile, the #more-quizzes does not get appended to the URL. What could the cause be?

Is it possible that the mobile browser version you are using doesn't support this?
Try checking the MDN compatibility matrices:
[https://developer.mozilla.org/en-US/docs/Web/API/Window/location]
and
[https://developer.mozilla.org/en-US/docs/Web/Events/hashchange]
Also, have you verified that your event is getting fired when you touch the button on mobile?

Android-jQuery cannot detect when popup dialog is closed

I have an Android app that is interfacing with a website (that I have no control of) and I'm able to do that by loading different Javascript or jQuery scripts to my WebView. One of my tasks is for my app to detect when a dialog in the website is displayed and closed. So far I've been able to detect if the dialog has been displayed through this script (works for both Desktop and Mobile mode):
$(".ui-link").click(function() {
Android.dialogOpened(); // function in my Android app
});
And detect if the dialog was closed by pressing the X button of the dialog through this script (works for both Desktop and Mobile mode):
$(".ui-btn-left.ui-btn.ui-shadow.ui-btn-corner-all.ui-btn-icon-notext.ui-btn-up-f").on("tap", function() {
Android.xBtnClicked();
});
By messing around with the Console in my PC (Desktop mode only), I've also been able to detect when the dialog is closed by clicking outside the dialog.
// popupDialog-screen is the ID of the space outside the dialog
$("#popupDialog-screen").click(function(){
alert('clicked outside'); // or the Android function
});
But when I try to use my mobile device (or by changing to Mobile mode in the Console), the script above does not work! I've also tried using various other scripts using different classes or divs, also tried using .on('tap') instead of click, and many other methods, but none of them have worked so far .
This is my first time ever using Javascript and jQuery so I don't understand much of the code of the website. If it helps, I saw that it uses Tapestry, and I saw the code to display the popup, but did not see where it is closed. Below is the code I found (I did not make this):
// dialoglink.js
(function( $ ) {
T5.extendInitializers(function(){
var bindElements = [];
function init(spec) {
var elementId = specs.triggerId;
if ( $.inArray(elementId, bindElements) === -1 ) {
bindElements.push(elementId);
$('#' + elementId).click(function(e) {
e.preventDefault();
jQuery('#' + spec.dialogId).popup('open');
return false;
});
}
}
return {
dialogLink : init
};
});
}) ( jQuery );
What do you think is the problem? I've been at this for hours. Thanks!

Finally got it to work!
Searched about popups in jQuery mobile and used the afterclose event.
Here is the working script:
$('#popupDialog').popup({
afterclose: function( event, ui ) {alert('CLOSED')}
});
Source: http://api.jquerymobile.com/popup/#event-afterclose

How can I create a "view to desktop version" link on mobile site without it looping back to mobile version when it resolves?

I've recently created a separate mobile skin for a website. The site serves the mobile version of a page based on the screen size of the device it is being viewed on using the following code.
<script type="text/javascript">
if (screen.width <= 600) {
window.location = "mobile/";
}
</script>
I'd now like to add a "view desktop version" link at the bottom of the page. Naturally, with the above code in the header of each page, it just detects the screen size again and loops back.
Could someone please suggest how I could get around this. I suspect this will be a session or a cookie but I'm very new to java and don't know how to set these up.
thanks in advance for any advice.

This should be handled by the viewport in the metatag of your website. The use of jquery can allow users to opt out of responsive design:
var targetWidth = 980;
$('#view-full').bind('click', function(){
$('meta[name="viewport"]').attr('content', 'width=' + targetWidth);
});
See this link for more clarification.

To detect if link was clicked you can:
Add a specific query parameter (like ?forceDesktop=true) which should be removed if returned to mobile
Use media queries and single skin (see bootstrap)
Maybe look for more elaborate version to detect mobile (link)
Chrome for Android has option to request desktop site (How to request desktop

I've managed to come up with another solution using local storage which is really simple for a beginner like me. It's probably an amateurish way of doing things but it certainly works for my purposes.
So updated the code on the desktop version of the site to:
var GetDesk = 0;
var GetDesk = localStorage.getItem('GetDesk');
//check screen size is less than 600
if (screen.width <= 600) {
//check if there's anything in local storage showing the users requested the desktop
if (GetDesk == 0 ) {
window.location = "/mobile.html";
}
}
then added code to the mobile version of the site to check if the user has previously requested the desktop version:
var GetDesk = localStorage.getItem('GetDesk');
if (GetDesk == 1 ) {
window.location = "/desktop.html";
}
Then at the bottom of the mobile version added the button:
<!-- onclick set the value of GetDesk to 1 and redirect user to desktop site -->
<button onclick="localStorage.setItem('GetDesk','1'); window.location.href = '/desktop.html';">View desktop</button>
As I say, perhaps not the best way but it certainly works and is easy for beginners.

How to detect "device mode" (MVC3 + Bootstrap)

I'm working with MVC3 and Bootstrap Responsive, and I want to detect by Razor (or javascript) which mode is active (desktop, tablet or phone) to show the correct partial view in one case or another.
For example:
#if( mode=='phone')
{
#html.Partial("_partialPhone")
}
#if( mode=='desktop')
{
#html.Partial("_partialDesktop")
}
...etc
I don't want to use just ".visible-phone" "visible-tablet" and ".visible-desktop" css classes, because although only one partial view is displayed, all of them are loaded in the DOM and rendered by Razor engine. And that is not good for a Phone and Tablet performance.
Can anyone help me?
Thanks

Media queries happen on the client.
This is fundamentally impossible.
You could have the client set its size in a cookie, then read the cookie on the server.

You should be able to do that with MVC4 (I don't know if this functionality exists in MVC3, but the sample on the site below uses MVC4 so that's what I'm basing my response on).
Switchable Mobile Views
It appears that you can start making files named like [ActionName].Mobile.cshtml and ASP.NET automatically uses those when it detects a request from a mobile device (and this appears to be customizable so you could create your own for tablets or whatever). He demonstrates something similar to what you are asking about in Razor - he renders different links based on the current display mode, but I assume this would work to render different partial views as well:
#if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
<div class="view-switcher ui-bar-a">
#if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
{
#: Displaying mobile view
#Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
else
{
#: Displaying desktop view
#Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
}
</div>
}
Though if you have separate mobile views and desktop views then it I wouldn't think you'd need to manually switch between the two partials like you are asking about.
Related information