I'm building a mobile website using FancyBox, which works fine on all Android devices I've thrown at it and all iPhones, but has a problem on webOS devices.
When my subject pops up in FancyBox, it's supposed to be centered in the the viewbox of my device, but on webOS, the subject is at the top of the page.
This causes a problem when a user clicks on a subject at the bottom of my webpage and then has to scroll all the way to to the top to see it.
Any ideas?
The problem is that scrollLeft and scrollTop values of the page aren't updated on webOS when you scroll in the page. This is because internally, the page is rendering as one large image and the WebView used by the browser is just panning around on that image. The FancyBox code uses those properties to adjust the top/left CSS values of the box when it's displayed.
Related
Used sample html along with PWA.
Added the app to home screen using safari in iPhone.
In browser whenever there is an orientation change I am able to get the proper window inner height and width, whereas in app that is launched form the home screen icon it doesn't give the changed width and height immediately in the orientation change callback.
Can someone help me with this?
Device: iPhone 12 safari
It seems to be a bug in Webkit browsers:
https://bugs.webkit.org/show_bug.cgi?id=170595
Someone suggest:
To avoid creating a new element, The following workaround seems to work fairly well for me:
For non-Safari, get the layout viewport size from document.documentElement.clientHeight (& Width).
Unfortunately, Safari's documentElement size does not update when the URL bar hides so I couldn't just apply it to all Webkit browser, but this bug just doesn't happen to Safari.
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 web app that wraps the main site content in an Iframe to enable some elements that are persistent across the site (only way to do what I'm after as far as I can tell).
It works fine on most browsers, but there is a scrolling problem on the Iphone: The content displays, but trying to scroll does a drag and drop operation instead.
Is there any way to tell the Iphone browser to use normal scrolling in that specific Iframe?
Example site: http://carlocapocasa.com
Thanks a ton and a half,
Carlo
Use two fingers to scroll up and down.
I also had problems getting an iframe to scroll on iOS devices. My iframe was inside a DIV, which had it's overflow set to hidden.
My solution was to set the overflow of the containing DIV to visible.
What does the iphone (3gs) safari use as the thumbnail displayed when switching between windows?
for the page below, built using jqtouch, the page contents disappears when clicking the page switcher. the background remains
http://www.maths.manchester.ac.uk/~dszotten/limmud/iphone/
Well, that's funny. My page and the jqtouch page both have their screen working as it should. Yours goes blank just like you said. Maybe you can remove features from your page and move it towards the sample case bit by bit to figure out what's going on.
I am coding a website for iphone.
Some of the content (images and strings I have no control over) is too wide to fit in the 320px viewport. When I first encountered this, it caused the entire page to revert to web page view (scaled small text).
So, I put the wide images in a div with CSS style="width:320px; overflow:scroll;" This stopped the page scaling but I assumed I would be ale to scroll that div horizontally to see the rest of the images (like the app store does with screen snaps). However, the scrolling just doesn't work on the ipod. (It does work on Safari in default Mac mode but not in Safari as iPhone User Agent.)
Anyway, how can I get the sideways scrolling on the ipod?
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
Scroll with 2 fingers?