reformater une page html simple sur un iphone

J'ai un html appelé today.html et je l'utilise sur mon iphone et je dois zoomer pour voir mes tâches comment puis-je le formater correctement pour que je le déforme autour du écran sur l'iPhone et le texte est la bonne taillereformater une page html simple sur un iphone

ici est 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

Source

2009-02-23 sebey

Jetez un oeil here

Quote:

Si vous êtes un expert CSS, votre première pensée sera d'utiliser le type de support "handheld" dans votre code CSS. Par exemple, si un navigateur se considère comme un périphérique de poche, ce code masquera tous les éléments appartenant à la classe CSS de navigation. C'est à portée de main si vous savez que ces éléments sont commodes mais redondants et prennent plus d'espace qu'un utilisateur du terminal mobile veut renoncer:
@media handheld { 
    .navigation { 
     display: none; 
    } 
} 
Malheureusement, cela ne fonctionnera 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 que l'iPhone affiche toutes les pages Web d'une manière "stupide". Ainsi, l'iPhone regarde le type de média «écran», tout comme le fait votre navigateur de bureau.

Existe-t-il une alternative? Oui! Vous pouvez spécifier qu'un ensemble de règles CSS appliquent uniquement lorsque l'écran est inférieure à une certaine résolution:
@media only screen and (max-device-width: 480px) { 
    .navigation { 
     display: none; 
    } 
} 

Source

2009-02-23 11:50:16 epatel

Essayez le réglage font-size: 100%; sur le corps, de cette façon le navigateur sera certainement à partir de sa taille par défaut avant en appliquant vos tailles em. En plus de cela, essayez d'ajouter -webkit-text-size-adjust: auto; à votre page.

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

Source

2009-02-23 11:59:24 roborourke

Avez-vous essayé de placer la fenêtre à la taille de l'écran de l'iPhone?

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

Voir plus de détails à: constrain-your-viewport-for-iphone-web-development
Voir aussi developer.apple.com pour d'autres facteurs concernant le développement web de l'iPhone (par exemple Ajuster la taille du texte pour Lisibilité)

Source

2009-02-23 12:04:47 Dror

Ive nettoyé votre HTML un peu, en mettant le LI à l'intérieur de UL et se débarrasser de la div redondant.

Vous pouvez définir une largeur maximale sur n'importe quel élément de niveau de bloc, de sorte que la combinaison avec les déclarations de médias de @ epatel est la suivante.

Jouez avec la largeur et ainsi de suite. Je les ai juste mis au hasard.

<!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>

Source

2009-02-23 12:07:15 garrow

La réponse est sélectionnée pour l'iphone, mais pour la largeur dynamique des appareils allant vous pouvez ajouter ce morceau de code dans votre balise « tête ».
Reference

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

Source

2013-08-26 12:59:30 yunas

reformater une page html simple sur un iphone

Répondre

Questions connexes