I'm not sure whats happening here. I thought this was working fine before and now when I look at it the news is displaying fine...but on iphone and maybe any mobile its only filling half the screen.
I could try to use the inspector on chrome to fix it but the site is filling the screen on desktop but still only half on the actual device. Any idea what might be the issue? I messed around with the media queries but its not helping.
The news section is working fine but the rest are only filling half the screen.
greenpointpictures.com
Related
The question is simple I've tried several different techniques like re-ordering scripts being called in the DOM, removed 100% height from the body and html element in my css; but none of it worked.
My site won't scroll down the page on iPhone or iPad and I can't seem to figure out why. It will scroll a few hundred pixels down the page and then freezes.
I've run an audit in chrome and tightened up as much as I could but, i've checked the timeline but don't see any resources hogging the bandwidth that might cause the page to just freeze like this.
Here is the public facing link (sandbox) I have going on.
https://cloud.spinsys.com/sky/marketing-v3/index.html
Obviously to reproduce the error you'll have to view on an iPad or iPhone or any tablet that you might try it on to see if it works on those.
Has anyone encountered an issue with their site not scrolling on an iPad or iPhone?
It is a responsive site and it's of major importance that I get this fixed.
Any advice, help, suggestions would be most helpful, thanks to the S.O. community upfront.
The problem was the skrollr.js library. I have removed it and the page scrolls fine on iPad and iPhone.
I have a problem that I've been working on for the past 10 hours (going crazy).
I've been working on a revised version of Walma - which is a collaborative white board written for node.js. I have placed a div header above the whiteboard, and a content area and footer div below it.
This works perfectly on my pc, however when I try to run it on my iPhone I can not scroll down the page to view content. It's like there is no permission to do this- I can not scroll or zoom or anything apart from draw on the canvas.
Notes: I have made the canvas only take up 60% of the iphone screen so that I am able to scroll (as apposed to draw). But this doesn't work.
I have removed the meta tags that you see in the demo.
I have changed the css multiple times with no success.
Is there something I'm over looking? Is there some javascript that's preventing iphone from scrolling that I haven't noticed? I would be incredibly thankful if anyone could point me in the right direction.
Git (demo is linked in the description top) : https://github.com/opinsys/walma
My adaptation : https://dl.dropboxusercontent.com/u/91956067/walma.tar.gz
Many Many thanks,
Joel.
I am using iframe in Fancybox 1.3.4 to show web page samples. Some pages contain large amount of images and can be very long.
It works perfectly on all other devices except iOS.
The pop-up window loads the content at first, but it stops loading in a short time. So basically, people can only see top part of the web page on their iOS devices. When they scroll down in pop-up window, all they see is blank. Sometimes, if they are lucky and have a fast internet, they might be able to see more...
I am not sure if this is the issue with iOS or Fancybox.
Any help is appreciated.
Thanks,
Milo
I've started working on a mobile page and I've made the css so that the page can expand or contract and look fine. When I rotate the page though, by turning my iphone sideways, instead of resizing as though there is a new screen size (wide), it's zooming in. I have an image on the page and I really don't want it to zoom in, because it pixelates the image. I would rather it resize as though it was a new page.
You can see it here:
http://scclib.com/mobile
I figured it out by adding this meta tag, I haven't tested it on android or ipads, but this at least solves my problem for iphone.
I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.
But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.
I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?
EDIT:
I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.
Original answer:
That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.
I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.
For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.
Hope this makes sense, if not let me know.
FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.
I'm sure this is a bug... will respond if/when I figure out a fix.