Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1271441

    axirr
    Participant

    Greetings! Trying to disable all zooming capabilities on mobile. Checked out this link and duplicated, but did not work when checked on my mobile device. Any ideas? (my site).

    #1271661

    Nabeel A
    Moderator

    Hi there,

    Thanks for writing in! You can try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

    (function($) {
      $.fn.nodoubletapzoom = function() {
          $(this).bind('touchstart', function preventZoom(e) {
            var t2 = e.timeStamp
              , t1 = $(this).data('lastTouch') || t2
              , dt = t2 - t1
              , fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1) return; // not double-tap
    
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(this).trigger('click').trigger('click');
          });
      };
    })(jQuery);

    Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

    #1271829

    axirr
    Participant

    No dice. Did not do it.

    #1271883

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating in! You might be interested in these links:
    https://davidwalsh.name/zoom-mobile-browsers
    http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page
    http://stackoverflow.com/questions/13215730/how-to-disable-zooming-capabilities-in-responsive-design

    If you follow what has been suggested in the links, since you have your child theme active and ready, please follow the following steps below:
    1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
    2] Insert the following code into that new file

    <?php
    
    // =============================================================================
    // VIEWS/GLOBAL/_META.PHP
    // -----------------------------------------------------------------------------
    // Outputs meta data into the <head> of the site.
    // =============================================================================
    
    ?>
    
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
    
    <title><?php wp_title( '' ); ?></title>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    3] Save the file named as _meta.php
    4] Upload this file to your server in the child theme’s folder
    wp-content/themes/x-child/framework/views/global/

    Hope this helps.

    #1272748

    axirr
    Participant

    Thanks! It’s definitely disabling “tap-to-zoom” but i can still pinch and zoom in. No big deal, still works great, thanks!

    #1272758

    Rad
    Moderator

    Glad to hear that you’re welcome!

    Or how about this?

    <?php
    
    // =============================================================================
    // VIEWS/GLOBAL/_META.PHP
    // -----------------------------------------------------------------------------
    // Outputs meta data into the <head> of the site.
    // =============================================================================
    
    ?>
    
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    <title><?php wp_title( '' ); ?></title>
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    Thanks!