I am in the process of developing a Wordpress website and I require a button for switching between mobile and desktop versions manually.
Within my .css file, I have included:
@media (pointer:coarse) {}
This adds modifications for the mobile version based on whether the device has a cursor or not.
My goal now is to trigger these modifications manually with something like this:
$('#Button').click(function(){
...
});
The challenge lies in targeting large portions of a .css file.
If you have any alternative solutions, please share! Feel free to ask if anything is unclear.
EDIT: Credit goes to Jignesh Sanghani for the inspiration! I have added a class (.mobile) before every element that I want to activate in mobile mode. In a separate .js file, I used the following code along with the HTML markup:
<button id="mobileversion">Mobile-Version</button>
<button id="desktopversion">Desktop-Version</button>
The .js code is as follows:
jQuery(document).ready(function($){
$("body").removeClass("mobile");
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("body").addClass("mobile");
var link = document.getElementById('desktopversion');
link.style.display = 'block';
}
$('#mobileversion').click(function(){
$("body").addClass("mobile");
var link = document.getElementById('mobileversion');
link.style.display = 'none';
var link = document.getElementById('desktopversion');
link.style.display = 'block';
});
$('#desktopversion').click(function(){
$("body").removeClass("mobile");
var link = document.getElementById('desktopversion');
link.style.display = 'none';
var link = document.getElementById('mobileversion');
link.style.display = 'block';
});
});
I now have 2 buttons for switching between versions and can hide one button using .css code to display only one per version of the website.