爲什麼我的CSS在移動Safari瀏覽器中有所不同？

在Chrome，FF和Safari（適用於Windows）我的頁面看起來一模一樣：爲什麼我的CSS在移動Safari瀏覽器中有所不同？

safari desktop render

但在移動Safari瀏覽器（iPhone 4）是這樣的： mobile safari render

我的問題是在移動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>

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; }

來源

2011-02-11 Matt Kocaj

移動Safari已知放大文本的某些部分（特別是在段落）。這樣可以讓您的網頁內容更容易閱讀，而不必放大太多。

你可以試試一起使用iPhone專用媒體查詢與

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

，以阻止這種情況發生，但是這將會使你的文字真的很難閱讀，而無需向各個方向平移英寸

來源

2011-02-11 03:42:47 BoltClock

我想了解這可能如何工作。因爲我看到很多其他網站（甚至像上面的例子那樣的博客）在i4上呈現完全相同的網站。他們是否做了一些特殊的/額外的工作來消除你所指的效應，還是我在做一些非標準的事情，使我的工作變得困難？ – 2011-02-11 03:46:22

@cottsak：查看我的編輯方式。 – BoltClock 2011-02-11 03:46:45

您是否嘗試過爲文本元素設置百分比大小？

body{ 
    font-size:100%; 
} 

h1{ 
    font-size:130%; 
} 

h2{ 
    font-size:120%; 
} 

p{ 
    font-size:90%; 
}

字體大小應根據視圖屏幕調整大小。

來源

2011-02-11 05:08:17 Dan

爲什麼我的CSS在移動Safari瀏覽器中有所不同？

回答

相關問題