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%;
Related
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've found many related questions but none with an answer that explains how to scroll an iframe using the 2 finger method in iOS 4.
I am able to scroll a div with 2 fingers by setting a width and height attribute and setting overflow: scroll;. Here's a more complete example of this:
<div style='width: 280px; height: 200px; overflow: scroll; -webkit-overflow-scrolling: touch;'>
Just imagine a bunch of content is in here, spanning well over 200px
worth of height. You can scroll this just fine in iOS 4 by using 2
fingers, or in iOS 5 by swiping 1 finger thanks to
"-webkit-overflow-scrolling: touch;".
</div>
This same method isn't working on iframes on my iPad 1 running iOS 4.3. Here's a complete example that won't scroll with any combination of fingers in iOS 4 (although, of course, the -webkit-overflow-scrolling allows it to work on iOS5):
<html>
<head>
<style type="text/css">
#scroller {
width: 280px;
height: 200px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#scroller iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="scroller">
<iframe src="content.html">content.html is a big list of nonsense.</iframe>
</div>
</body>
</html>
I must add that I can get 2 finger scrolling to work if I set the width and height of the iframe to actual pixel values, like height: 1000px;, but I will never know how tall the iframe's content will be. So, perhaps the real question is how can I convince mobile Safari in iOS 4 that the iframe inside of this div is indeed larger than 280x200 pixels?
A simple idea posted by rossb # github.com/fancyapps worked beautifully for both scrolling in iOS 4 (2 fingers) and iOS 5 (1 finger) and solves the "blank content on scroll" issues that iOS 5's iframes seem to be plagued with. Basically, you don't want the iframe to handle any scrolling. Give it a fixed width/height and wrap the scrollable content in your included file in a div that can be scrolled.
Here's an example:
<iframe id="stupid-iframe" width="600" height="200" src="a-file.html"></iframe>
a-file.html:
<html>
<body>
<div id="wrapper" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
...all my normal content...
</div>
</body>
</html>
I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.
My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.
SCREENSHOT:
http://i51.tinypic.com/2rmxsfp.png
<!DOCTYPE html>
<html>
<head>
<title>Fade bottom</title>
<style>
body{background:#FFF}
p {
color:#000;
margin:0 auto;
text-align:justify;
text-indent:30px;
width:600px;
}
#fadeBottom {
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
bottom:0;
height:50px;
left:0;
position:fixed;
width:100%;
}
</style>
</head>
<body>
<p>Some long text here. Lorem ipsum?</p>
<div id="fadeBottom"></div>
</body>
</html>
For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...
Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}
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?