Geek Answers Handbook

Reformat a simple html page on iphone

I have html called today.html and I use it on my iphone and I need to zoom in to see my tasks, how can I format it correctly so that I look for the screen on iphone and the text is the right size

here is my 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>

thanks

+4
source share
5 answers

Have you tried adjusting the viewport to the iphone screen size?

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

see more information at: constrain-your-viewport-for-iphone-web-development
Also see developer.apple.com for other factors related to developing your iPhone website (for example, “Customize text size for readability”)

+7
source

Look here

Quote:

If you're a CSS expert, your first thought will be to use a “manual” media type in your CSS code. For example, if the browser considers itself a handheld device, this code will hide all elements that belong to the CSS navigation class. This is convenient if you know that these elements are convenient, but redundant and take up more space than the pocket user wants to refuse:

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

Unfortunately, this will not work on the iPhone. What for? Because Apple knows that the iPhone can display a page much better than most handheld computers. And they didn’t want the iPhone to display all the web pages in a dumbfounded way. Thus, the iPhone looks at the “screen” type of multimedia, as it does on your desktop.

Is there an alternative? Yes! You can specify that the CSS rule set applies only when the screen is less than a certain resolution:

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

Try setting font-size: 100%; on the body, so the browser will definitely start with it the default size before applying your em sizes. In addition to this, try adding -webkit-text-size-adjust: auto; to your page.

In this article, we will consider in detail the development features for mobile safari: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

0
source

Ive cleaned up your HTML a bit by putting the LI inside UL and getting rid of the redundant div.

You can set the maximum width on any element of the block level, so combining this with the @epatel library ad will give you the following.

Play with width and so on. I just installed them randomly.

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

The selected answer is for iphone, but for the dynamic width of the ranking devices you can add this piece of code to your head tag.
Link

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

More articles:


All Articles