Desde su lanzamiento inicial en 2007, el iPhone ha sido diseñadores Web inspiradores para crear páginas especialmente diseñadas para el dispositivo móvil. El iPhone viene con el navegador web Safari de Apple. Además, se puede descargar el navegador web Opera para el iPhone de App Store de Apple. Usted no tiene que rediseñar su sitio web para el iPhone, los dos navegadores pueden mostrar las páginas Web como si estuviera mirando a ellos en un ordenador personal. Puede ser en sus intereses para crear un diseño web más aerodinámica que cargará rápidamente en un iPhone. Se necesita algo de conocimiento de CSS, HTML y el acceso a un iPhone para probar su diseño.
explicación
Abra su página Web actual ".html" archivo usando el software de edición de HTML y CSS. Usted no necesariamente necesita un software especializado --- editores de texto básicos pueden editar ambos archivos HTML y CSS. En Windows, puede utilizar el Bloc de notas. En Mac puede utilizar TextEdit.
Añadir un "<link>" elemento a la sección "<head>" de su archivo HTML que se refiere a un nuevo archivo ".css" que vamos a crear. Vamos a llamar el nuevo archivo "iphone.css." La ruta del archivo debe ser el mismo que otros archivos ".css" siendo utilizados por la página. Definirá donde se va a cargar el nuevo archivo CSS cuando haya terminado. También es necesario incluir instrucciones para la página sólo para cargar este archivo si se está viendo en un dispositivo con un ancho máximo de 480px. He aquí un ejemplo:
<Link rel = "stylesheet" media = "sólo pantalla y (max-device-width: 480px)" href = "/ iphone.css" type = "text / css" />
Crear un nuevo archivo ".css" en tu editor de HTML y CSS. Este será el archivo que llamaremos "iphone.css." Usted tendrá que escribir esto como si fuera un ".css" normal y debería, de hecho, reflejar su estilo normal de CSS. Es posible que desee abrir su archivo principal CSS a utilizar como referencia.
Para el iPhone por lo general, tendrá que arreglar todo en una sola columna y establecer el ancho de la columna al 100% por lo que llena la pantalla del iPhone. Es posible que desee ocultar ciertas cosas completamente --- puede utilizar "display: none" para evitar que los elementos de la carga. Páginas web se disponen de manera diferente. Tomará un poco de experimentación hasta que llegue un nuevo diseño que es satisfactorio.
Sube tu nuevo archivo CSS a la sección de su sitio web designado en el "<link>" elemento que ha añadido a su archivo HTML. Sube tu archivo HTML revisado para reemplazar el original.
Consejos y advertencias
- Este es un enfoque muy básico. El iPhone ofrece algunas funciones más avanzadas para los interesados en la creación de aplicaciones web diseñadas específicamente para el dispositivo. Si ese es su interés, tendrá que unirse al iPhone Developer Program para que pueda explorar las capacidades con herramientas y tutoriales provistos de Apple.
- Este proceso describe un diseño utilizando un archivo HTML y un archivo CSS que puedes subir. Es posible que el sitio utiliza un servicio que no es compatible con este método. En lugar de abrir y crear archivos en el equipo, es posible que se edita en tu navegador en el "panel de control" de su sitio web. Los principios generales siguen siendo los mismos. Usted debe crear un archivo "iPhone.css" que está diseñado ancho de la pantalla especial del iPhone e incluir el "<link>" elemento a tener su página instruir Safari para el iPhone para cargar ese archivo CSS.