• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

344
Views
Deshabilite el zoom automático/zoom de campo en las etiquetas de entrada en mi sitio móvil, SIN deshabilitar todas las capacidades de zoom

Pasé todo el día buscando una solución, y este sitio sigue apareciendo, así que ¿por qué no les pregunto a ustedes?

Estoy construyendo el sitio web móvil de nuestra empresa y queremos deshabilitar el zoom automático que usan los dispositivos móviles para acercar las entradas de texto/búsqueda/correo electrónico cuando están enfocadas. Estoy creando el sitio en HTML5 y he visto/probado la solución <meta name="viewport" content="width=device-width, user-scalable=no" /> . Con varias propiedades (es decir, escala mínima = #, escala máxima = #") Esto funciona en casi TODOS los dispositivos móviles en los que estoy probando. Solo un problema. Quiero que el usuario pueda acercar/alejar en su ocio (tenemos algunas tomas de productos de mayor resolución que sería bueno ver de cerca)

¿Cómo puedo deshabilitar el acercamiento al hacer clic en las etiquetas de entrada, mientras mantengo el control manual completo del zoom del usuario?

ps el sitio también usa jQuery. Entonces, cualquier pensamiento que use eso podría ayudar.

gracias jrak

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

Establecer la metaetiqueta en <head> así funcionó para mí:

 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
about 3 years ago · Santiago Trujillo Report

0

Puede que no funcione exactamente para su estilo, pero si establece el tamaño de fuente de los elementos de entrada en 16 px o más, el zoom de enfoque se detendrá.

about 3 years ago · Santiago Trujillo Report

0

Consulte: Deshabilitar el zoom automático en la etiqueta "Texto" de entrada - Safari en iPhone

No hay una manera limpia que pueda encontrar, pero aquí hay un truco...

1) Me di cuenta de que el evento de mouseover ocurre antes del zoom, pero el zoom ocurre antes de los eventos de mousedown o focus.

2) Puede cambiar dinámicamente la etiqueta de la ventana gráfica META usando javascript (consulte ¿Habilitar/deshabilitar el zoom en el safari de iPhone con Javascript? )

Entonces, intente esto (que se muestra en jquery para compacidad):

 $("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=0" />'); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=1" />'); }

Esto es definitivamente un truco... puede haber situaciones en las que el mouseover/down no siempre detecte entradas/salidas, pero funcionó bien en mis pruebas y es un comienzo sólido.

about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error