html5 - playsinline - viewport definicion

¿Recreando la entrada de rango HTML5 para Mobile Safari(webkit)?

Question

Así que he estado trabajando en una aplicación de iPad HTML5 para trabajar y me he encontrado con un problema. No tuve acceso a un iPad mientras trabajaba en esta aplicación y confié en el Safari de escritorio para obtener mi aplicación rápidamente (probablemente no sea la mejor, de todos modos ...)

Tengo que depender de un rango de entrada para una parte de la interfaz. Después de ver que HTML5 tenía una entrada de rango, estaba contento ya que esto es justo lo que necesitaba. Incluso logré estilizarlo exactamente para lo que fue diseñado:

¡Esto es genial! ... hasta que lo probé en un iPad y no funciona. Solo muestra una entrada de texto. Ahora me pregunto qué hacer ... Necesito un control deslizante, algo que cuando se arrastra, escupe los datos. Obviamente necesita trabajar con el tacto. Después de buscar por toda la web, no parece haber una solución sólida.

¿Qué es lo que ustedes sugieren aquí? ¿Cuál es la forma correcta de codificar un control deslizante compatible con el uso táctil, al igual que el HTML5 nativo que no es compatible?

¡Cualquier idea / pensamiento / conocimiento / experiencia sería muy apreciada! James

Answer 1

Puede echar un vistazo a http://jqueryui.com/demos/slider/ . Intente acceder a la página en el iPad y vea si es táctil.

Answer 2

Tengo exactamente el mismo problema, solo con un iPhone.

Esto se debe a que Mobile Safari solo admite un subconjunto de HTML5. Estoy usando JqTouch que me está causando todo tipo de problemas, así que evite este marco.

Eche un vistazo a jquery mobile. Actualmente es Alpha 3, pero tiene un control deslizante que funciona en iOS.

Espero que esto te ayude un poco.

Answer 3

Pruebe este: https://github.com/freqdec/fd-slider . Incluso la información sobre herramientas en la página de demostración está funcionando en el safari móvil - http://www.frequency-decoder.com/demo/fd-slider/tooltip/ .

Answer 4

Hay una solución para rangeinput de jquerytools para dispositivos táctiles: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js

¡Funciona de maravilla!

Answer 5

Probé todas las " soluciones " propuestas y las encontré todas faltantes .
Todos están excesivamente hinchados , algunos cambian el marcado existente o fuerzan estilos CSS innecesarios.

Así que diseñé mi propia solución en 2kb de JavaScript ( minificado ).

Pruébelo (en su dispositivo móvil): https://range-touch.herokuapp.com

Código : https://github.com/dwyl/range-touch (conciso y comentado )

Para que esto funcione en su propio proyecto, todo lo que necesita hacer es incluir
range-touch.min.js en su página / plantilla.

Mágicamente <input type="range"> funciona en todos los dispositivos móviles.

Puedes diseñar el control deslizante y el botón como quieras.
He incluido estilos de muestra en el opcional / style.css

Nota : esta solución supone que tienes JQuery o Zepto.js

Answer 6

Descubrí que debes usar un toque muy ligero en la mini tableta (o teléfono) Safari, y el control deslizante funciona. Si presiona demasiado fuerte, Safari Mobile (o tableta), intenta mostrar la burbuja emergente "seleccionar / seleccionar todo", como si fuera un campo de texto. Además, Safari en mi tableta o teléfono pensó que quería "mover la ventana": todavía no he encontrado una solución a estos problemas. Sin embargo, logré que el control deslizante funcionara en Safari con un "ligero toque con el dedo".

Encontré los siguientes recursos para ser útil:

Pluma de Aron Woost: https://codepen.io/aronwoost/pen/nlyrf Aquí hay una muestra del código de Woost:

 input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}

Daniel Stern: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Puede hacer una búsqueda en Google sobre "Cómo diseñar controles deslizantes de rango en Webkit de Sara Vieira" y encontrar su artículo.

Espero que esto ayude.