Why is my CSS different in mobile safari?
On Chrome, FF and Safari (for windows) my page looks exactly the same:
but on Mobile Safari (iPhone 4) it's like this:
My problem is the lack of definition in font sizes on the mobile safari page. Please tell me what in my CSS/markup is so screwed?
Markup:
<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,开发者_Go百科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; }
Mobile Safari is known to enlarge certain parts of the text (especially in paragraphs). This is to make the content of your pages easier to read without having to zoom in too much.
You can try using an iPhone-specific media query together with
html {
-webkit-text-size-adjust: none;
}
to stop this from happening, but that's going to make your text really hard to read without having to pan in all directions.
Have you tried setting percentage sizes for the text elements?
body{
font-size:100%;
}
h1{
font-size:130%;
}
h2{
font-size:120%;
}
p{
font-size:90%;
}
The font sizes should resize according to the view screen.
加载中,请稍侯......
精彩评论