I've been implementing Infinite-Scroll by Paul Irish on my site. It works on desktop browsers, but on mobile (iPhone specifically) it doesn't straight away. The work around is zooming in slightly, that makes the scroll event fire which triggers infinite scroll.
Also see the issue report here:
https://github.com/paulirish/infinite-scroll/issues/3
My question is: is there a solution for this?
I've noticed Tumblr makes infinite-scroll work without a workaround.
If you were to check http://youworkit.tumblr.com/ on iPhone, then switch from the mobile to the standard desktop view, infinite-scroll does work without zooming in.
Any thoughts?
This works for me:
JQuery Detect Scroll at Bottom
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
Related
I am facing a problem in mobile view (iPhone) of my website: http://www.html5css3tuts.com/turkey
When I open this in iPhone, scrolling the website is very hard. It gets sticky when we scroll up. It's working very well in other mobiles even in the iPad also. I am not able to find where it's getting problem.
Use tag in the page for mobile resolution:
<meta name="viewport" content="width=device-width, initial-scale=1">
My issue is the zoom that occurs when changing the orientation of an iPhone from portrait to landscape. I see this is a pretty well known issue, and there seems to be plenty of documentation on it, but so far, none of the solutions are working for me.
This is my code..
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I'm still getting the zoom issue with this, even though I've seen people post this code as a solution to the problem, and they seem to be getting the desired results, I'm not.
My goal here is to disable zoom, have it scaled at 1.0, and of course, prevent the zoom that occurs when changing orientation.
I would like to avoid using javascript as well.
According to this site, the device-width is always the width in portrait. In other words, the device width will always be 320 on an iPhone.
In the meta tag that you posted, you would need to set the width=device-height to get the intended results in landscape.
While I haven't tackled this problem myself, according to that same link it looks like you will need to use media queries with the orientation.
I have a painful issue CSS issue which appears to be caused by the Disqus CSS.
The Disqus CSS seems to cause my page's main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.
Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)
Any help would be greatly appreciated.
You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn't use iframes, so it should work if the hierarchy you use is stronger than theirs.
More info here:
http://css-infos.net/property/-webkit-text-size-adjust
Hope that helps :)
Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.
For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that's right?).
<meta name="viewport" content="width=device-width, initial-scale=1">
From the screenshots I think that is actually too small though, so something like this may be better.
<meta name="viewport" content="width=800, initial-scale=1">
This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.
See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
I asked a question and received an answer regarding sizing images for mobile browsers.
The answer provided works for inline images. However, I need to use background images as part of a header, as well. They're set via css classes. On android, they scale correctly in both portrait and landscape, but on iPhone they automatically zoom in when turning from portrait to landscape. This is a problem. I have a viewport tag set like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Apparently when the iPhone (at least the newest versions) are turned to landscape mode, it rescales and zooms in really huge, rather than just repeating the background more times to account for the wider screen.
Here's what my code looks like:
<tr><td colspan="2" class="logoHeader"><img src="/images/mobile/logoCopy.png" /></td></tr>
where class logoHeader looks like this:
td.logoHeader {
background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat,
url(/images/mobile/transparentLeavesGradient.png) top left repeat-x;
text-align:center;
}
Any ideas? I know that I can add the user-scalable property of the viewport meta, but we don't want to prevent users from manually zooming if necessary. We just want to prevent it from automatically zooming when the phone is turned into landscape mode.
FYI: I did search and found this and this, which are pretty much asking the same question. But they're both a number of months old, and neither has an actual answer to the problem, so I'm hoping that someone has come up with something in the interim.
to avoid rescaling when orientation changes try
<meta name='viewport' content='width=1024' />
and adjust width for your needs. If this won't work on android correctly, you can always send different viewport tag by PHP+user agent detection, or set it on device by javascript.
Change the viewport to:
<meta name="viewport" content="width=device-width, initial-scale="selfrender"/>
is it possible to add an iframe to an iphone web page. I tried adding a standard iframe with height and width 100% however when i use them to display them in the simulator from the local files i cant scroll even after setting scrolling to auto. IS this a limitation of the simulator or am i making a mistake somewhere. im using this code
<iframe src ="http://moodle.acs.gr" width="100%" height="90%" scrolling="auto">
iframes.
I also have problems with an iPhone and iframes, and this is on a normal iPhone, not a similator. I don't think you can scroll within iframes at all on the iphone browser. You'll have to do things with the <meta name="viewport" or iframe width/height to get it to work