Here we will see How to Force Desktop View on Mobile Devices for WordPress sites.

1. Meta Viewport Tag

<meta name="viewport" content="initial-scale=1, width=device-width">

2.Showing the Desktop Version on a Mobile Device

<!--hyperlink to change browser layout-->
<a href="#" class="mobileSpecific" id="viewDesktopLink">Show Desktop Version</a>

CSS

/* for desktop devices or wide screens, do not show the link */
@media only screen and (min-width: 980px)
{
  .mobileSpecific
  {
   display:none;
  }
}

3. Javascript

add_action('wp_head', 'myCustomFunction');
function myCustomFunction()
{
if ( wp_script_is( 'jquery', 'done' ) )
{?>
  <script type="text/javascript">
  var desktopBreakpoint = 980;
  jQuery('#viewDesktopLink').click(function(e) {

  // prevent default link action
  e.preventDefault();

  // set viewport content width
  jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
});
</script>
<?php }
}

4. Switch The Version

if(jQuery('#viewDesktopLink').text() == '<?php _e("Show Desktop Version") ?>')
{
  jQuery('#viewDesktopLink').text('<?php _e("Show Mobile Version") ?>');
  jQuery('meta[name="viewport"]').attr('content', 'width=' + desktopBreakpoint );
}
else
{
  jQuery('#viewDesktopLink').text('<?php _e("Show Desktop Version") ?>');
  jQuery('meta[name="viewport"]').attr('content', 'width=device-width');
}
There are currently no comments.