Wjhsathletics.com

Comment concevoir une page Web pour un iPhone

Comment concevoir une page Web pour un iPhone


Depuis son lancement initial en 2007, l'iPhone a été concepteurs de sites Web inspirants pour créer des pages spécialement conçues pour l'appareil mobile. L'iPhone est livré avec Safari le navigateur Web d'Apple. En outre, vous pouvez télécharger le navigateur Web Opera pour l'iPhone App Store d'Apple. Vous n'êtes pas obligé de redessiner votre site web pour l'iPhone, les deux navigateurs peuvent afficher des pages Web comme si vous étiez en train de regarder les sur un ordinateur à la maison. Il peut être dans votre intérêt de créer un plus Web design rationalisée qui va charger rapidement sur un iPhone. Vous aurez besoin d'une connaissance de CSS, HTML et l'accès à un iPhone pour tester votre conception.

Instructions

1 Ouvrez votre page Web actuelle ".html" fichier en utilisant votre logiciel d'édition HTML et CSS. nécessairement Vous n'avez pas besoin de logiciels spécialisés --- éditeurs de texte de base peuvent modifier les deux fichiers HTML et CSS. Sous Windows, vous pouvez utiliser NotePad. Sur Mac, vous pouvez utiliser TextEdit.

2 Ajouter un "<link>" élément à la section "<head>" de votre fichier HTML qui fait référence à une nouvelle ".css" fichier que nous allons créer. Nous appellerons le nouveau fichier "iphone.css." Le chemin du fichier doit être le même que d'autres ".css" fichiers utilisés par la page. Il définira où vous téléchargez votre nouveau fichier CSS lorsque vous avez terminé. Vous devez également inclure des instructions pour la page de ne charger que ce fichier si elle est en cours de visualisation sur un dispositif avec une largeur maximale de 480px. Voici un exemple:

<Link rel = "stylesheet" media = "seulement écran et (max-device-width: 480px)" href = "/ iphone.css" type = "text / css" />

3 Créer un nouveau ".css" fichier dans votre HTML et CSS éditeur. Ce sera le fichier que nous nommerons "iphone.css." Vous allez écrire cela comme vous le feriez un ".css" normal et il devrait, en effet, refléter votre style CSS normal. Vous pouvez ouvrir votre fichier CSS principal d'utiliser comme référence.

Pour l'iPhone, vous aurez généralement vouloir tout organiser en une seule colonne et définir la largeur de la colonne à 100% afin de remplir l'écran de l'iPhone. Vous pouvez masquer certaines choses entièrement --- vous pouvez utiliser "display: none" pour empêcher ces éléments de chargement. Les pages Web sont disposés différemment. Il faudra un peu d'expérimentation jusqu'à ce que vous obtenez un nouveau design qui est satisfaisant.

4 Téléchargez votre nouveau fichier CSS à la section de votre site Web désigné dans le "<link>" élément que vous avez ajouté à votre fichier HTML. Téléchargez votre fichier HTML révisé pour remplacer l'original.

Conseils et avertissements

  • Cette approche est très basique. L'iPhone offre des fonctionnalités plus avancées pour les personnes intéressées par la création d'applications Web spécialement conçues pour l'appareil. Si tel est votre intérêt, vous devez rejoindre le programme iPhone Developer afin que vous puissiez explorer les capacités avec les outils fournis et des tutoriels d'Apple.
  • Ce processus décrit une conception à l'aide d'un fichier HTML et un fichier CSS que vous pouvez télécharger. Il est possible que votre site utilise un service qui ne sont pas compatibles avec cette méthode. Plutôt que d'ouvrir et créer des fichiers sur votre ordinateur, vous pouvez les éditer dans votre navigateur dans le "panneau de contrôle" de votre site. Les principes généraux restent les mêmes. Vous devez créer un fichier "iPhone.css" qui est conçu en particulier la largeur de l'écran de l'iPhone et inclure le "<link>" élément d'avoir votre page charger Safari pour iPhone pour charger ce fichier CSS.