4

私はtoday.htmlという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>

ありがとう

4

5 に答える 5

7

iphoneの画面サイズに合わせてビューポートを設定してみましたか？ 

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

詳細については、constrain-your-viewport-for-iphone-web-development
を参照してください。また、iPhone Web開発に関するその他の要素 (読みやすさのためにテキスト サイズを調整するなど) については、 developer.apple.com を参照してください。

于 2009-02-23T12:04:47.573 に答える
1

こちらをご覧ください

見積もり：

CSS の専門家であれば、CSS コードで「ハンドヘルド」メディア タイプを使用することを最初に考えるでしょう。たとえば、ブラウザがそれ自体をハンドヘルド デバイスと見なしている場合、このコードはナビゲーション CSS クラスに属するすべての要素を非表示にします。これらの要素は便利だが冗長であり、ハンドヘルド ユーザーが諦めたくないほど多くのスペースを占有することがわかっている場合に便利です。

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

残念ながら、これは iPhone では動作しません。なんで？Apple は、iPhone がほとんどのハンドヘルドよりもはるかに優れたページを表示できることを知っているからです。そして彼らは、iPhone がすべての Web ページを「馬鹿げた」方法で表示することを望んでいませんでした。したがって、iPhone は、デスクトップ ブラウザと同じように、「画面」メディア タイプを参照します。

代替手段はありますか？はい！画面が特定の解像度よりも小さい場合にのみ、一連の CSS ルールが適用されるように指定できます。

@media only screen and (max-device-width: 480px) {
   .navigation {
        display: none;
   }
}
于 2009-02-23T11:50:16.690 に答える
0

選択された回答は iphone 用ですが、測距デバイスの動的な幅については、このコードを「head」タグに追加できます。
参照

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
于 2013-08-26T12:59:30.390 に答える
0

ボディに設定font-size: 100%;してみてください。そうすれば、ブラウザはサイズを適用する前にデフォルトのサイズから確実に開始されますem。それに加えて、ページに追加してみ-webkit-text-size-adjust: auto;てください。

この記事では、モバイル サファリの開発の詳細について詳しく説明しています: http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

于 2009-02-23T11:59:24.640 に答える
0

LI を UL 内に配置し、冗長な div を取り除くことで、HTML を少しクリーンアップしました。

任意のブロック レベル要素に最大幅を設定できるため、それを @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>
于 2009-02-23T12:07:15.853 に答える