переформатировать простую HTML-страницу на iphone - PullRequest
Новая
       10

переформатировать простую HTML-страницу на iphone

4 голосов
/ 23 февраля 2009

У меня есть html под названием today.html, и я использую его на своем iphone, и мне нужно увеличить масштаб, чтобы увидеть свои задачи, как я могу правильно отформатировать его, чтобы он деформировался вокруг экрана на iphone, и текст правильный размер

вот мой код 

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

спасибо

Ответы [ 5 ]

7 голосов
/ 23 февраля 2009

Вы пытались настроить область просмотра в соответствии с размером экрана iphone? 

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

подробности см .: ограничение веб-разработки для iphone-сайта
Также см. developer.apple.com , чтобы узнать о других факторах, касающихся веб-разработки для iPhone (например, «Настроить размер текста для удобства чтения»)

1 голос
/ 23 февраля 2009

Взгляните здесь

Цитата:

Если вы являетесь экспертом по CSS, вашей первой мыслью будет использование «портативного» типа мультимедиа в вашем коде CSS. Например, если браузер считает себя портативным устройством, этот код будет скрывать все элементы, принадлежащие классу навигации CSS. Это удобно, если вы знаете, что эти элементы удобны, но являются избыточными и занимают больше места, чем пользователь мобильного устройства хочет отказаться: 

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

К сожалению, это не будет работать на iPhone. Зачем? Потому что Apple знает, что iPhone может отображать страницы намного лучше, чем большинство карманных компьютеров. И они не хотели, чтобы iPhone отображал все веб-страницы «тупо». Таким образом, iPhone выглядит как «экранный» тип мультимедиа, так же как и ваш браузер.

Есть ли альтернатива? Да! Вы можете указать, что набор правил CSS применяется только тогда, когда экран меньше определенного разрешения: 

@media only screen and (max-device-width: 480px) {
   .navigation {
        display: none;
   }
}
0 голосов
/ 26 августа 2013

Выбранный ответ для iphone, но для динамической ширины устройств измерения дальности вы можете добавить этот фрагмент кода в тег " head ".
Ссылка 

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
0 голосов
/ 23 февраля 2009

Я немного очистил ваш HTML, поместив LI внутрь UL и избавившись от лишнего div.

Вы можете установить максимальную ширину для любого элемента уровня блока, так что в сочетании с медийными объявлениями @ epatel вы получите следующее:

Поиграйтесь с шириной и так далее. Я просто установил их случайно. 

<!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 голосов
/ 23 февраля 2009

Попробуйте установить font-size: 100%; на теле, чтобы браузер определенно начинал с размера по умолчанию до применения ваших em размеров. В дополнение к этому попробуйте добавить -webkit-text-size-adjust: auto; на свою страницу.

В этой статье подробно рассматриваются особенности разработки для мобильного сафари: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

...