Whenever there is a SPAN element in HTML content, the mobile version of Safari renders content differently- it seems that font size increases for the whole paragraph. Consider two examples.
<div style="border: 1px solid red; width:500px;">
<p>This is a paragraph. This is a paragraph. This is a paragraph.</p>
</div>
and
<div style="border: 1px solid red; width:500px;">
<p>This is a <span>paragraph</span>. This is a paragraph. This is a paragraph.</p>
</div>
Second example breaks page structure because font size increases, and thus the content exceeds div's width. Is there any way around this (besides not using SPAN)?
iPhone OS 3.1.2
try adding -webkit-text-size-adjust: none; to the CSS and iPhone safari should stop making the span font size look differnet.
The display of those two HTML fragments look identical to me on iPhone Safari (also iPhone OS 3.1.2).
Is there any CSS being applied to SPAN tags?
[Edit: I see the difference now; you won't see any difference if both examples are on the same page.]
[Added:]
By explicitly setting the size, it appears you can get consistent text size between the two. For example:
<style type="text/css">
div, p, span {
font-size: 24px;
}
</style>
Paul, could you try explicitly setting the font-size for the span to match that of the paragraph tag and see if this solves your issue?
Related
I have a webpage that I am now making work on an ipod touch. The webpage container is 480 pixels wide (450+30 padding) and then it has two divs, each with a single line of text.
When I have just one div of text, then the text appears on a single line, just like on my computer. However, when I add the second div, the iPod touch decides to make the text much bigger (for both divs), such that the text goes onto the next line.
How do I ensure that the text remains the same (smaller) size, no matter how many divs I add? I would like it to the same as on my computer. The user must be able to zoom.
css:
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:15px;
margin:0px;
}
.container{
padding:15px 15px 1px 15px;
width:450px;
background:white;
overflow:hidden;
}
.quote{
padding-bottom:3px;
font-style:italic;
text-align:center;
width:450px;
overflow:hidden;
}
html:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0" />
<body >
<div class= "container">
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
</div>
</body>
I added the following to class container and now it works. Is there any reason NOT to do this? I didn't add it to body because I don't really know what other affects it might have.
-webkit-text-size-adjust: 100%;
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
I have a page containing an empty div with a gradient in it, like this:
<div class="prodGradientArea"></div>
.prodGradientArea {
background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
display: inline-block;
float: left;
height: 10px;
width: 420px;
}
This looks brilliant in FF, IE, Chrome and Safari ... on a computer. When checked in Safari on an iPad or iPhone, I get a tiny border around the div. This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature").
So the only thing that removes it is to add pure text. I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix.
Please help!
Jenny
Insert in your index.php this code in the <head>-area to avoid artifacts from bad zoom interpretation of iOS:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Then go to your css-file and insert a 1px negative margin, to avoid this. In my website this was the footer div:
.unten {
margin-top: -1px;
}
I hope this will help you, too!
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;
Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
I have one slight problem, not a big deal but still a little annoying. I have:
<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!
Here is my css:
h1 {
color:#FFFFFF;
font-size:18px;
line-height:22px;
font-weight:bold;
margin-top:0px;
}
h2 {
font-size:12px;
color:#333333;
font-weight:bold;
margin-bottom:-5px;
}
p {
color:#333333;
font-size:12px;
line-height:18px;
font-weight:normal;
}
I believe you are looking for this in your CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
A better solution can be using 100% instead of none, as stated by user612626 in an older thread:
Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too.
I think this is a better approach than filtering by screen size.
Hope it helps.
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
E.g.,
#media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}