web - puedo - solicitar version de escritorio whatsapp

¿Cómo deshabilitar el enlace al número de teléfono cuando está en el escritorio?

Question

¿Cómo puedo agregar un número de teléfono a un sitio web en el que se pueda hacer clic, pero oculta el enlace cuando estoy navegando en un sitio web que no admite el toque?

Podría usar Modernizr para configurarlo aunque. No se como

<a href="tel:[phone]"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a>

Answer 1

¿Podrías tener el código dos veces? es decir..

<div class="desktoptel">0800 000 000</div>
<div class="mobiletel"><a href="tel:[phone]">0800-000-000</div>

Entonces simplemente ''mostrar: ninguno'' en la clase correspondiente dependiendo de los tamaños de su navegador?

Answer 2

Aquí hay una solución simple basada en jquery que desarrollé para resolver este problema. Ver comentarios en el código para la explicación. https://jsfiddle.net/az96o8Ly/

// Use event delegation, to catch clicks on links that may be added by javascript at any time.
jQuery(document.documentElement).on(''click'', ''[href^="tel:"]'', function(e){
  try{
    // These user-agents probably support making calls natively.
    if( /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      // Do nothing; This device probably supports making phone calls natively...
    } else {
      // Extract the phone number.
      var phoneNumber = jQuery(this).attr(''href'').replace(''tel:'', '''').trim();

      // Tell the user to call it.
      alert("Please call "+phoneNumber);

      // Prevent the browser popup about unknown protocol tel:
      e.preventDefault();
      e.stopPropagation();
    }
  } catch(e){
    console.log("Exception when catching telephone call click!", e);
  }
});

Answer 3

De esta manera funciona sin añadir más CSS.

Intente reemplazar la etiqueta a con otra cosa como una etiqueta de span , pero solo para navegadores móviles, por supuesto. Los beneficios son que no está ocultando esto con CSS, lo que evita la acción predeterminada y lo mantiene como un enlace. Ya no será así, así que no tendrás que preocuparte.

He creado un ejemplo here . El teléfono en negrita no funciona de esta manera, ver código abajo

Tomé parte del código de uno de los encuestados para definir si el navegador es móvil. Y tienes que marcar estos enlaces con class="tel" o encontrar una manera de determinar si el href tiene "tel:" en él. JQuery también se requiere.

// define if browser is mobile, usually I use Anthony''s Hand mobile detection library, but here is simple detection for clarity
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && ''ontouchstart'' in document.documentElement);
if ( !probablyPhone ) {
    // find all the A with "tel:" in it, by class name
    $(''a.tel'').each(function(){
        var span = document.createElement(''span'');

        // SPAN inherits properties of A, you can also add STYLE or TITLE or whatever
        span.innerHTML = this.innerHTML;
        span.className = this.className;

        // replace A with SPAN
        this.parentNode.insertBefore(span, this);
        this.parentNode.removeChild(this);
    });
}

Answer 4

En mi sitio de destino, todas las marcas de enlace de teléfono están en este patrón: <a href="tel:[phone]"">111-222-3333</a> . Mi solución es muy simple:

function setPhoneLink() {
    if (screen.width > 640) {
        $("a[href^=''tel:'']").each(function(){
            $(this).replaceWith($(this).text());
        });
    }
} 

Ancho del dispositivo: móvil <640; tableta> = 768 y <1024; mesa> = 1024. Fuente: http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 5

Estaba tratando este problema, buscando soluciones, y encontré este hilo (y algunos otros). Tengo que confesar que no pude hacer que ninguno de ellos funcione correctamente. Estoy seguro de que estaba haciendo algo mal, PERO hice un truco.

Como han señalado otros, cambiar el CSS para ocultar la indicación de enlace visible ( color , text-decoration , cursor ) es el primer paso y el más sencillo. El truco es definir un title para el enlace de tel .

<p>Just call us at <a class="cssclassname" href="tel:[phone]" 
title="CLICK TO DIAL - Mobile Only">[phone]</a>.</p>

Al hacer esto, no solo se oculta el indicador de un enlace (a través de CSS - ver ejemplos de otros), sino que si alguien se desplaza sobre el enlace, el título aparecerá y dirá "CLICK TO DIAL - Mobile Only". De esa manera, no solo hay una mejor experiencia de usuario, sino que su cliente no lo acusa de tener un enlace roto.

Answer 6

Estoy agregando el siguiente css a javascript cuando se detecta un dispositivo móvil.

pointer-events:none

El código js es:

var a = document.getElementById("phone-number");
if (Platform.isMobile())   // my own mobile detection function
    a.href = "tel:[phone]";
else
    $(a).css( "pointer-events", "none" );

Answer 7

Gracias a la publicación de TattyFromMelbourne ahora estoy usando un bit bastante simple:

My button id = "call" realizará la llamada telefónica según su función de prueba "probablemente phone", pero también se desplazará hacia abajo a la sección de información de contacto de cualquier manera, lo que le dará un uso funcional al botón.

También reemplacé la alerta con una función vacía, para eliminar la ventana emergente.

<a id="call" href="#contact">PHONE US</a>


$("#call").on(''click'', function() {
    var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && ''ontouchstart'' in document.documentElement);
    var link = "callto:15555555555";
        if ( !probablyPhone ) {
            window.alert = function() {};}              
    else{window.location.href = link;}
});
    </script>

Answer 8

Hace poco tuve este mismo problema. Este problema está en todo y en todas partes. ¿Cómo se oculta el prefijo ''tel:'' y evita que explote en los navegadores normales? No hay una sola respuesta buena.

Terminé haciéndolo de esta manera:

Primero utilizo el metalenguaje para filtrar el navegador frente a los dispositivos móviles (como php / coldfusion / perl) según la cadena de usuario:

regular exp match for "/Android|webOS|iPhone|iPad|BlackBerry/i",CGI.HTTP_USER_AGENT

eso me da una condición if / else para navegador de escritorio vs teléfono.

A continuación, mi etiqueta href se ve así: <a class="tel" id=''tel:[phone]'' href=''''>800-555-1212</a>

Use CSS para diseñar la clase .tel en la hoja de estilo del escritorio, de modo que no parezca un enlace a los navegadores de escritorio. Todavía se puede hacer clic en el número de teléfono, pero no es obvio, y no hará nada:

/* this is in default stylesheet, styles.css: */
.tel{
    text-decoration:none;
    color: #000;
    cursor:default;
}
/* it should be re-styled in mobile css: */
.tel{
    text-decoration: underline;
    color: #0000CC;
    cursor:auto;
}

Por último, hago un poco de jQuery en los enlaces móviles. JQuery obtiene el ID de la clase a.tel y lo inserta en la propiedad href, lo que hace que sea accesible para los usuarios de teléfonos.

Todo se ve así:

<!-- get regular CSS -->
<link rel="stylesheet" href="styles/styles.css" type="text/css" media="Screen" />

<!-- get user agent in meta language. and do if/else on result. 
 i''m not going to write that part here, other than pseudocode: -->

if( device is mobile ) {

    <!-- load mobile CSS -->
    <link rel="stylesheet" href="styles/mobile.css" type="text/css" media="handheld" />

    <!-- run jQuery manipulation -->
    <script>
        $(function(){$(''a.tel'').prop(''href'',$(''a.tel'').prop(''id''));});
    </script>
}

<p> Call us today at <a class="tel" id=''tel:[phone]'' href=''''>800-555-1212</a>!</p>

Una advertencia a este enfoque: las identificaciones deben ser únicas. Si tiene números de teléfono duplicados en una página que desea vincular, cambie el ID a nombre, luego use jQuery para recorrerlos.

Answer 9

He encontrado la mejor manera. Entiendo que esto es viejo, pero encontré una manera muy fácil de hacer esto.

Usando este código a continuación

<a href=“tel:[phone]” class="not-active">888-555-5555</a>

//This is the logic you will add to the media query
.not-active {
   pointer-events: none;
   cursor: default;
}

En su CSS haga uso de consultas multimedia. Así que haz una consulta de medios para todos los escritorios

@media only screen and (min-width: 64em) {
    /* add the code */
    .not-active {
       pointer-events: none;
       cursor: default;
    }
}

Ahora todas las páginas de tamaño de escritorio no podrán hacer clic en él.

Answer 10

He tenido éxito con esto usando Modernizr, específicamente la prueba touch . No es una solución perfecta, ya que no hace nada para ayudar a las tabletas o portátiles con capacidad táctil, pero funciona en la mayoría de las situaciones de navegación de escritorio.

HTML:

Call us at: <a href="tel:1-800-BOLOGNA" class="call-us">1-800-BOLOGNA</a>

CSS:

.no-touch a.call-us {
  color: black;            /* use default text color */
  pointer-events: none;    /* prevents click event */
  cursor: text;            /* use text highlight cursor*/
}

Los CSS anteriores apuntan a los enlaces con class="call-us" en dispositivos no táctiles que cubren la mayoría de los escritorios.

Tenga en cuenta que los pointer-events son compatibles con todos los navegadores modernos, pero IE solo lo admite en las versiones 11+. Vea la tabla de compatibilidad .

Otra solución, aún imperfecta, sería utilizar Modernizr.mq junto con Modernizr.touch para detectar el ancho de la pantalla y la capacidad táctil y luego inyectar el enlace del teléfono con jQuery. Esta solución mantiene el enlace del teléfono fuera del código fuente y, luego, solo aparece en dispositivos táctiles más pequeños que un ancho determinado (por ejemplo, 720px que probablemente cubran la mayoría de los teléfonos pero excluyen la mayoría de las tabletas).

En última instancia, depende de los proveedores de navegadores encontrar una solución a prueba de balas aquí.

Answer 11

Ingrese esto en css personalizado y llámelo un día:

a.tel { color: #FFFFFF; cursor: default; /* no hand pointer */ }

Cambia tu color según sea necesario.

¡Aclamaciones!

Answer 12

Mi enfoque es similar a otro enfoque anterior; Hay algunas consideraciones que tomo en cuenta:

• Como sabemos, no existe una buena manera programática de detectar el soporte. Este es un caso raro en el que nos vemos obligados a analizar la cadena UserAgent.
• Esto debería ser del lado del cliente; no hay necesidad de detección del lado del servidor.
• Ahora hay navegadores de escritorio que pueden manejar tel: links; El comportamiento de Chrome en el escritorio es, en el peor de los casos, no hacer nada cuando se hace clic. En el mejor de los casos, puede hacer una llamada con Google Voice.
• Debido a que no hacer nada cuando se hace clic es el comportamiento de retroceso de Chrome, debemos usar ese comportamiento como un respaldo en todos los navegadores.
• Si su página asume la responsabilidad de crear tel: links, debe responsabilizarse de todos los tel: vínculos y deshabilitar la autodetección en el navegador.

Con todo esto en mente, sugiero que primero agregue una etiqueta meta a su <head> :

<meta name="format-detection" content="telephone=no"/>

Luego, defina una función de JavaScript que analice el UserAgent y devuelva true si y solo si pensamos que el navegador no nos llevará a una página de error cuando se hace clic en el enlace:

function hasTelSupport()
{
    return /Chrome//|Mobile( Safari)?//|Opera M(in|ob)i//|w(eb)?OSBrowser//|Mobile/;|Tablet/;/.test(navigator.userAgent);
}

Luego, llame a esa función desde el atributo onclick en su enlace:

<a href="tel:[phone]" onclick="return hasTelSupport();">Call Me</a>

Esto permitirá hacer clic en los enlaces de tel: Chrome, Edge, iOS Safari, Android Browser, Blackberry, Dorothy, Firefox Mobile, IE Mobile, Opera Mini, Opera Mobile y webOS. Los enlaces no harán nada cuando se haga clic en otros dispositivos o navegadores.

Por favor use el formato internacional para su tel: links. En otras palabras, los primeros caracteres deben ser un + y un código de país.

Answer 13

Para mí, el método más fácil, pero más simple sin nuevas clases / configuración es a través de css:

a{
    color: #3399ff;
}

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration: none;
    color: #000;

    pointer-events: none;
    cursor: default;
}

/* Adjust px here (1024px for tablets maybe) */
@media only screen and (max-device-width: 480px) { 
    a[href^="tel"]:link,
    a[href^="tel"]:visited,
    a[href^="tel"]:hover {
        text-decoration: underline;
        color: #3399ff;

        pointer-events: auto;
        cursor: pointer;
    }
}

Html simplemente va así:

<a href="tel:[phone]">(+12)3 456 7</a>

Esto funciona para los navegadores modernos y IE 11+. Si necesita incluir 8 <IE <11, agregue lo siguiente a su javascript, ya que los eventos de puntero no funcionan en IE:

var msie = window.navigator.userAgent.indexOf("MSIE ");

if (msie > 0){
    var Elems = [], Tags = document.querySelectorAll("a[href^=''tel'']");

    //Nodelist to array, so we''re able to manipulate the elements
    for (var i = 0; i < Tags.length; i++ ) {
        Elems[ i ] = Tags[ i ];
    }

    for(var i = 0; i < Elems.length; i++){
        Elems[ i ].removeAttribute(''href'');
    }
}

EDITAR: encontré otra respuesta en otro hilo, que puede ser útil para usted - SO - Respuesta

Answer 14

Parece que esto podría hacerse con una simple consulta de medios para la mayoría de los navegadores. Algo como esto está funcionando como un encanto para mí:

<style type="text/css">
    #mobil-tel {
        display:none;
    }

    @media (max-width: 700px) {
        #mobil-tel {
            display:block;
        }

        #desktop-tel{
            display:none;
        }
    }
</style>

y en el enlace del escritorio, omita el ''href'', en el enlace móvil, coloque el ''href''.

Answer 15

Podría usar consultas de css media para controlar cuándo se ve como un enlace y cuándo no.

@media(min-width:768px){
 a[href^="tel:"] {
  pointer-events: none;
 }
}

cualquier cosa por debajo de 768px funcionará como enlace, por encima de eso, solo como texto.

Answer 16

Puede utilizar las consultas de medios css3 para detectar una ventana móvil y ocultar el enlace en consecuencia.

@media(max-width:640px){
 .your-calling-link{
display:none;
}
}

Alternativamente, si desea mostrar el enlace y simplemente deshabilitar la funcionalidad de clic, use la función jquery:

screen.width 

o

screen.innerWidth

y deshabilitar la funcionalidad de clic en el enlace usando

 $(''.your-link'').off(click);

Answer 17

Si solo desea desactivar el clic en las pantallas móviles:

if(typeof window.orientation !== ''undefined''){
    $(''a[href^="tel:"]'').on(''click'', function(e){
        e.preventDefaults();
    });
}

Espero que esto ayude :)

Answer 18

Solo pensé que agregaría mi valor de dos centavos a (lo que está resultando ser una discusión bastante larga).

Básicamente uso el evento onClick (en el enlace) para ejecutar Javascript para devolver un verdadero o falso booleano. Si el valor devuelto es verdadero, es decir, alguna variable o función que comprueba si el dispositivo es un teléfono devuelve un valor verdadero, entonces el navegador sigue la URL href. Si el valor devuelto es falso, entonces la URL href se vuelve, en efecto, inactiva. (Comportamiento HTML estándar, mucho antes de HTML5.)

Esto es lo que quiero decir:

<html>
<head>
<title>tel markup example</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <!-- Does not really matter what version of jQuery you use --> 
<script>
var probablyPhone = ((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && ''ontouchstart'' in document.documentElement);
function initialize() {
 if ( !probablyPhone ) {
  alert ("Your device is probably not a phone");
  ( function( $ ) { 
   $( ''.call'' ).css ( "text-decoration", "none" );
   $( ''.call'' ).css ( "color", "black" );
   $( ''.call'' ).css ( "cursor", "default" );   
  } )( jQuery );
 }
}
</script>
</head>
<body onLoad="initialize();">
Please ring (some fictitious number in Australia): <a href="tel://[phone]" class="call" onClick="return probablyPhone;">[phone]</a>
</body>
</html>

Tenga en cuenta que también agregué un cambio de formato al enlace para que el usuario lo vea como si fuera un texto normal.

Aquí hay una esencia que he creado.

Solo para finalizar esta publicación / respuesta, el crédito por escribir un código JavaScipt sucinto para detectar un teléfono (basado en el agente del usuario y el evento uponuchstart) se asigna a un compañero rgb melbourniano en esta publicación de

Answer 19

@media screen {.telephone {pointer-events: none;}}