Cómo diseñar una página web para un iPhone

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
. Cosas que necesitará
iPhone
HTML y CSS software de edición
Instrucciones
1

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
2

Añadir a. "& Lt; link > " elemento al "& lt; head > " sección 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 :

& lt ; link rel = " stylesheet" media = " sólo pantalla y ( max- dispositivo -width: 480px ) " href = "/iphone.css " type = "text /css" />
3

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 que generalmente quieren 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
4

Sube tu nuevo archivo CSS a la sección de su sitio web designado en el . "& Lt; link > " elemento que ha añadido a su archivo HTML . Sube tu archivo HTML revisado para reemplazar el original .