Cómo ahorrar espacio en la pantalla iphone

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / IPhone & iPad diseño web

Al diseñar sitios web para la pantalla del iPhone relativamente pequeño, cada píxel es precioso. La secuencia de comandos que se muestra aquí está diseñado para desplazarse por la página automáticamente, ocultando la barra de direcciones y que le da más espacio para sus diseños.

HTML5 y CSS 3 permiten agregar muchos tipos de animaciones y elementos de diseño de sus páginas, pero por las características interactivas más avanzadas en la web, es necesario utilizar un poco de javascript o PHP u otro tipo de programación.

Esta javascript desliza las filas ventana de 60 píxeles hacia arriba. Eso le da la espalda al casi 15 por ciento de espacio en pantalla que el campo URL ocupa en la parte superior de la ventana del navegador. Al agregar esta javascript para una página web, se ocultará automáticamente la barra de direcciones de Safari en el iPhone y el iPod touch sin afectar a cualquier otro navegador.

Este script es ignorado por Firefox, Internet Explorer y Safari, incluso cuando se utiliza en un iPad o un ordenador.

Aquí está el código que hace este trabajo. Sólo tienes que añadir este código a la parte inferior de cualquier página web, justo antes de la etiqueta:

Este script fue publicado por Apple en 2007, cuando el primer iPhone fue lanzado. Las etiquetas de script dicen HTML que javascript está llegando: En HTML5, javascript es el lenguaje de scripts por defecto, por lo que no necesita tener nada en esa etiqueta, pero la escritura. Así es como funciona:
  1. La primera línea, window.onload = function () {, le dice al navegador para ejecutar este script cuando la página se carga por primera.
  2. La segunda línea, setTimeout, espera una décima parte de un segundo (definida por el número 100 en el extremo de esa línea).
  3. Después de una décima parte de un segundo, function () {window.scrollTo (0, 1) -} ejecuta y se desplaza la ventana para la coordenada 0 y la coordenada y x, más conocida como la parte superior de la página.
Si usted es completamente nuevo a la programación, echa un vistazo a la introducción de javascript en la página web w3schools.


 
 
 
 
 
 
 
Artículos Relacionados
 
  

 
 
Sobre el autor
 
  Cómo agregar jQuery a una página Cómo agregar jQuery a una página 
Una vez que haya descargado o jQuery sabe dónde encontrar la versión hospedada-CDN, es necesario hacer referencia a él en su página. jQuery es como cualquier archivo externo javascript.Añadir jQuery local para una páginaDescargar jQuery y…
  Java y javascript recursos para la construcción de un sitio web Java y javascript recursos para la construcción de un sitio web 
Los applets de Java añaden potencia y funcionalidad a su sitio Web. javascript proporciona interfaces de usuario mejoradas y otras funcionalidades para crear sitios web dinámicos. Estas dos tecnologías ayudan a su sitio web sea todo lo que…
  javascript y HTML javascript y HTML 
Usted puede pensar en javascript como una extensión de html- un add-on, si se quiere.Así es como funciona. Etiquetas HTML crean objetos- javascript permite manipular esos objetos. Por ejemplo, se utiliza el HTML y etiquetas para crear…
  Referencias y recursos de javascript Referencias y recursos de javascript 
javascript permite a la funcionalidad a una página web que HTML simple simplemente no puede hacer. La siguiente tabla muestra algunos valiosos recursos en línea para obtener más información sobre el uso de javascript en su sitio…
  Las mejores cosas de javascript Las mejores cosas de javascript 
javascript es un scripting lenguaje, que es un lenguaje de programación que está diseñado para dar a la gente un acceso fácil a los componentes creados previamente. En el caso de javascript, aquellos componentes prediseñados son los…
  Cómo utilizar getElementById de javascript para acceder a un elemento específico Cómo utilizar getElementById de javascript para acceder a un elemento específico 
Usted puede utilizar javascript para acceder a un elemento dentro de una página HTML. Usted puede hacer esto al hacer cambios en el elemento o al estilo CSS. Pruébelo en un ejercicio.Abra su editor de texto con un documento nuevo o en…
  Personalización de la configuración del navegador con su iphone 5 y safari Personalización de la configuración del navegador con su iphone 5 y safari 
El conseguir en el Internet con el iPhone es muy fácil usando sus capacidades Wi-Fi o 3G / 4G LTE. Una vez que estés en línea, el navegador incluido, Safari, es su boleto a un amplio mundo de la información, el entretenimiento, la educación, y…
  Cómo desarrollar aplicaciones de Facebook más fácilmente con los SDK Cómo desarrollar aplicaciones de Facebook más fácilmente con los SDK 
SDK de Facebook realizan dos funciones importantes. Dependiendo del SDK, se cargan las bibliotecas de funciones de scripting que los navegadores pueden utilizar para ejecutar código script no de otra manera a disposición del navegador, o que…
  Acerca de las etiquetas HTML5 Acerca de las etiquetas HTML5 
No todos los navegadores web en HTML5 soporte de Internet hoy en día. Concéntrese en lo que es posible en el navegador Safari en el iPhone, iPad y iPod. Si va a crear páginas web para la amplia audiencia de la World Wide Web, usted debe probar su…
  Crear un marco adaptable con html5 Crear un marco adaptable con html5 
Antes de crear un marco para un sitio web que se mostrará en el iPhone y el iPad, es útil pensar en el futuro acerca de cómo desea que sus páginas se ven cuando se agrega los estilos. Aquí es donde wireframes pueden realmente ayudar.En las…
  Mejorar funciones de prueba de safari con extensiones Mejorar funciones de prueba de safari con extensiones 
Al probar su sitio de comercio móvil de nuevo diseño, a veces es más fácil trabajar con lo que tienes. Si ya dispone de Safari o Chrome instalado en su ordenador, estás de suerte. Ellos hacen los sitios móviles de manera similar a la forma en…
  Cómo utilizar las herramientas de desarrollo de Safari en iOS Cómo utilizar las herramientas de desarrollo de Safari en iOS 
Activación de la consola de depuración en Safari en el iPhone, iPod touch o iPad le permite ver en HTML, errores de CSS y javascript directamente en el dispositivo. Esta es la forma más confiable para asegurar que usted no tiene problemas…
 
 »  »  »  » Cómo ahorrar espacio en la pantalla iphone