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
另请参阅developer.apple.com了解有关 iPhone Web 开发的其他因素（例如调整文本大小以提高可读性）

于 2009-02-23T12:04:47.573 回答
1

看看这里

引用：

如果您是 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;
   }
}
于 2009-02-23T11:50:16.690 回答
0

尝试font-size: 100%;在 body 上设置，这样浏览器肯定会在应用您的尺寸之前从它的默认尺寸开始em。除此之外，尝试添加-webkit-text-size-adjust: auto;到您的页面。

本文深入探讨了移动 safari 开发的具体细节： 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 回答
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 回答