ansaurus

Question

reformat a simple html page on an iphone

Answer 1

+1 A:

Have a look here

Quote:

If you are a CSS expert, your first thought will be to use the "handheld" media type in your CSS code. For instance, if a browser considers itself a handheld device, this code will hide all elements that belong to the navigation CSS class. That's handy if you know that these elements are convenient but redundant and take up more space than a handheld user wants to give up:
@media handheld {
    .navigation {
       display: none;
    }
}
Unfortunately this won't work on the iPhone. Why? Because Apple knows that the iPhone can display a page much better than most handhelds. And they didn't want the iPhone to display all web pages in a "dumbed-down" way. So the iPhone looks at the "screen" media type, just like your desktop browser does.

Is there an alternative? Yes! You can specify that a set of CSS rules apply only when the screen is smaller than a certain resolution:
@media only screen and (max-device-width: 480px) {
   .navigation {
        display: none;
   }
}

epatel 2009-02-23 11:50:16

Answer 2

A:

Try setting font-size: 100%; on the body, that way the browser will definitely be starting from it's default size before applying your em sizes. In addition to that try adding -webkit-text-size-adjust: auto; to your page.

This article goes into a lot of depth on the specifics of developing for mobile safari: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

sanchothefat 2009-02-23 11:59:24

Answer 3

+1 A:

Have you tried setting the viewport to fit the iphone screen size?

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

see more details at: constrain-your-viewport-for-iphone-web-development
Also see developer.apple.com for other factors regarding iPhone web development (such as Adjust Text Size for Readability)

Dror 2009-02-23 12:04:47

Answer 4

A:

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

You can set a max-width on any block level element, so combining that with @epatel's media declarations get's you the following.

Play around with the width's and so on. Ive just set them randomly.

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

<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/"&gt;
    <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>

garrow 2009-02-23 12:07:15

ansaurus

tags:

views:

answers:

reformat a simple html page on an iphone

related questions