reformater une simple page html sur un iphone

J'ai une page html appelée today.html et je l'utilise sur mon iphone et j'ai du zoomer pour voir mes tâches comment puis-je l'avoir formaté correctement de sorte que je qu'il déforme autour de l'écran sur l'iphone et le texte est à la bonne taille

voici mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tasks for today</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
    body {
        border: medium dashed #7979ff;
        background-color: #fff;
        margin: 0 auto;
    }

    body p{
        font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        padding-left: 10px;
    }

    .todos {
        font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
        color: #7D1518;
        padding-left: 20px;
    }
    .todos p{
        font: 1em Arial;
    }
</style>
<!-- Date: 2008-08-24 -->
</head>

<body>
<p>a greeting</p>
<div class="todos">

<li>a task</li>

<li>a task with detail</li>
<p>detail</p>
<li>a task with muilple acitons</li>


<ul>

<li>an action</li>

<li>an action</li>

<li>an action</li>

<li>an action</li>

<li>an action</li>

<li>an action</li>

<li>an action</li>



</ul>


</div>
</body>
</html>

grâce

OriginalL'auteur sebey | 2009-02-23

  1. 7

    Avez-vous essayé le réglage de la fenêtre d'affichage pour s'adapter à la taille d'écran pour iphone? 

    <meta name="viewport" content="width=320" />

    voir plus d'informations sur: contraindre-votre-fenêtre-pour-iphone-développement web

    Voir aussi developer.apple.com pour d'autres facteurs au sujet de l'iPhone de développement web (telles que Ajuster la Taille du Texte pour plus de Lisibilité)

    La page designingcontent.php est maintenant disponible sur archive.org.

    OriginalL'auteur Dror

  2. 1

    Ont un look ici

    Citation:

    Si vous êtes un CSS expert, votre première pensée est d'utiliser le "ordinateur de poche" type de support dans votre code CSS. Par exemple, si un navigateur considère lui-même un appareil de poche, ce code permet de masquer tous les éléments qui appartiennent à la navigation de la classe CSS. C'est pratique si vous savez que ces éléments sont pratiques mais redondants et de prendre plus d'espace qu'un ordinateur de poche de l'utilisateur veut donner:

    @media handheld {
    .navigation {
       display: none;
    }
}

    Malheureusement cela ne fonctionne pas sur l'iPhone. Pourquoi? Parce que Apple sait que l'iPhone peut afficher une page beaucoup mieux que la plupart des ordinateurs de poche. Et ils ne voulaient pas de l'iPhone pour afficher toutes les pages web dans un "simplifiés". Donc, l'iPhone se penche sur le "screen" type de support, tout comme votre navigateur de bureau.

    Est-il une alternative? Oui! Vous pouvez indiquer qu'un ensemble de règles CSS s'appliquent uniquement lorsque l'écran est plus petit qu'une certaine résolution:

    @media only screen and (max-device-width: 480px) {
   .navigation {
        display: none;
   }
}

    OriginalL'auteur epatel

  3. 0

    Essayez de définir font-size: 100%; sur le corps, de cette façon, le navigateur va certainement être à partir de sa taille par défaut avant d'appliquer votre em tailles. En plus de cela, essayez d'ajouter des -webkit-text-size-adjust: auto; à votre page.

    Cet article va dans beaucoup de profondeur sur les spécificités du développement mobile safari:
    http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

    OriginalL'auteur roborourke

  4. 0

    Ive nettoyé votre HTML un peu, en mettant la batterie au lithium à l'intérieur de l'UL et de se débarrasser de la redondante div.

    Vous pouvez définir un max-width sur n'importe quel élément de niveau bloc, de sorte que la combiner avec @epatel les médias des déclarations est le suivant.

    Jouer avec la largeur et ainsi de suite. Ive vient de les définir de façon aléatoire. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tasks for today</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="sebastian stephenson">
<style type="text/css" media="screen">
body {
border: medium dashed #7979ff;
background-color: #fff;
margin: 0 auto;
}
body p{
font: 2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-left: 5px;
}
.todos {
font: 1em"Lucida Grande", Lucida, Verdana, sans-serif;
color: #7D1518;
padding-left: 20px;
}
.todos p{
font: 1em Arial;
}
ul {
max-width:200px;
}
@media only screen and (max-device-width: 480px) {
ul {
max-width:480px;
}
}
@media only screen and (max-device-width: 240px) {
ul {
max-width:240px;
}
}
</style>
<!-- Date: 2008-08-24 -->
</head>
<body>
<p>a greeting</p>
<ul class="todos">
<li>a task</li>
<li>a task with detail
<p>detail</p>
</li>
<li>a task with muilple acitons
<ul>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
<li>an action</li>
</ul>
</li>
</ul>
</body>
</html>

    OriginalL'auteur garrow

  5. 0

    La réponse sélectionnée est pour iphone, mais pour la dynamique de la largeur allant de périphériques que vous pouvez ajouter ce bout de code dans votre "tête" tag.

    Référence

     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

    OriginalL'auteur yunas