为什么我的CSS在移动游猎中有所不同？

Question

为什么我的CSS在移动游猎中有所不同？

Mat*_*caj 1 html css browser iphone safari

在Chrome,FF和Safari(适用于Windows)上,我的页面看起来完全相同:

safari桌面渲染

但在Mobile Safari(iPhone 4)上它是这样的: 移动野生动物园渲染

我的问题是移动safari页面上的字体大小缺乏定义.请告诉我我的CSS /标记是如此搞砸了？

标记:

<body>
    <div id="container">
        <div id="header"><h1><a href="./DDD Blog_files/DDD Blog.htm" title="back to home page">DDD blog<span class="hidden"> (home)</span></a></h1></div>
    <div class="newPost controls"><a href="http://localhost:1906/posts/update">Post something new</a></div>
<div class="post">
    <h2><a href="http://localhost:1906/posts/2/title-of-the-first-blog-post">Title Of The First Blog Post</a></h2><span class="datetime" title="2010-12-15 00:00:00Z">1 month ago</span>
    <div class="controls"><a href="http://localhost:1906/posts/update/2">edit</a></div>
    <div class="body mattyMarkup">
        <p>A massive paragraph of text should represent a blog entry. Every line of this should add to the enormous example which I am trying to convey. Sometimes <a href="http://google.com/" title="http://google.com">links will dot</a> the post body landscape. Other times, <em>sweet-as</em> emphasis and punctuation will be required to communicate the message.</p>
<p>All in all, this is the end.</p>
    </div>
        <div class="comments">
            <a class="summary" href="http://localhost:1906/posts/detail/2#newComment">add the first comment</a>                
        </div>
</div>  
<div class="post">
    <h2><a href="http://localhost:1906/posts/1/the-original-and-best---post-1">The Original and Best - Post #1</a></h2><span class="datetime" title="2010-10-07 00:00:00Z">4 months ago</span>
    <div class="controls"><a href="http://localhost:1906/posts/update/1">edit</a></div>
    <div class="body mattyMarkup">
        <p>This text will be somewhat more brief than the post above, intended to denote a more recent thought. </p>
<p>I have some problems generating meaningful sentences to simply string together for sample text so this will be my second last sentence. This is the last.</p>
    </div>
        <div class="comments">
            <a class="summary" href="http://localhost:1906/posts/detail/1#newComment">3 comments</a>                
        </div>
</div>      
    </div>
    <div id="footer"></div>
</body>

Run Code Online (Sandbox Code Playgroud)

CSS:

body {
    margin: 0;
    border-top: solid 5px #3B9AE6;
}

.hideOverflow { overflow: hidden; }

#container {
    margin: 0 auto;
    width: 40em;
    padding: 0 1em;
}

.post {
    background-color: #FFFFFF;
    margin: 5em -1em;
    padding: 1em 0;
}

.post h2 { margin-top: 0; float:left; }
.post span.datetime { margin: 0 1em; }
.post .body { clear: both; }
.post .comments  a.summary { float: right; font-size:.9em; }
.post .controls { float: right; }

.updatePost form input[name], .updatePost form textarea[name] { width: 100%; }
.updatePost a.delete { float: right; margin-top: .25em; }

#footer { }


/*
Generics
*/

body { 
    color: #333; background-color: #fff;
    line-height: 1.3em;
}
body, input, textarea { font: 14px "Lucida Sans",tahoma,sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: Georgia,serif; font-weight: normal; color: #377AB0; }
/* */
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }


a, a:link { color: #3B9AE6; text-decoration: underline; }
a:hover, a:active, a:hover:visited , a:active :visited { color: #333; text-decoration: underline; }
a:visited { text-decoration: none; }

input.tip, textarea.tip { color: #aaa; }
form, fieldset { margin:0; padding:0; border:0; }

.infoBlock { margin: 1em 0; padding: 1em; background-color: #F2F9FD; }


/*
Specifics
*/

#header h1 { color: #D6D6D6; }
#header h1 span.hidden { color: #fff; }
#header h1 a { color: #D6D6D6; text-decoration: none; }
#header h1 a:hover { background-color: #D6D6D6; color: #fff; text-decoration: none; }

.post { margin: 4em 0; }
.post h2 a { color: #333; text-decoration: none; }
.post h2 a:hover, .post h2 a:active { color: #333; text-decoration: underline; }
.post span.datetime { color: #aaa; line-height: 1.8em; }

ol.comments { 
    list-style-type: none; 
    background-color: #F2F9FD;
    margin: 2em 0;
    padding: 1em;   
}
ol.comments span.datetime { font-size: .9em; }
ol.comments span.name { color: #3B9AE6; }

.newComment {
    border-top: dashed 1px #ccc;
    margin: 2em 0;
    padding: 1em;   
}
.newComment form p { font-size: .9em; }

.updatePost input[name=title] { font-size: 1.2em; }
.updatePost a.back { margin: 0 1em; }

.controls a, .controls a:link, a.command, a.command:link { color: red; text-decoration: underline; }
.controls a:hover, .controls a:active, .controls a:hover:visited , .controls a:active :visited,
    a.command:hover, a.command:active, a.command:hover:visited , a.command:active :visited{ color: #333; text-decoration: underline; }
.controls a:visited, a.command:visited { text-decoration: none; }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bol*_*ock 5

众所周知,移动Safari会扩大文本的某些部分(特别是在段落中).这是为了使您的页面内容更容易阅读而不必放大太多.

您可以尝试使用特定于iPhone的媒体查询

html {
    -webkit-text-size-adjust: none;
}

Run Code Online (Sandbox Code Playgroud)

阻止这种情况发生,但这将使你的文字真的难以阅读而不必向各个方向平移.

归档时间：	14 年，10 月前
查看次数：	5356 次
最近记录：	14 年，10 月前