I am implementing a plugin where users can zoom in and out of web content as they wanted. The plugin is going to be implemented to any mobile responsive websites.
I implemented the zoom in using
For FireFox
$('body').css('MozTransform','scale(2)');
For Chrome
$('body').css('zoom', ' 200%');
I have attached the images at the bottom.
Here right and bottom black bar is plugin part.
The problem is Desktop zoomin view.
Overflow happen and contents overflow are hidden. So when users click zoom in button on desktop, I would like to show zoomin version of mobile not zoomin version of desktop view.
I tried to fix this by changing or adding viewport metatag using Javascript.
<meta name="viewport" content="width=400, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
Here 400 is width of mobile device.
But it changed nothing.
Seems it can be easily solved if I can set device-width using Javascript, but not found solution yet.
I have been working on this issue for 2 days and anyone who have experienced this field, appreciate your help!
Is it even possible?
Desktop original view:
Desktop zoomed view:
Mobile original view:
Related
I am using fullpage.js with the "fullpane" theme on my wordpress.
When I open the site on my phone and scroll down, everything looks good and the content containers are where they are supposed to be.
BUT when I scroll up, the position of the content containers is being messed up and they are positioned much higher.
I was able to replicate the problem with multiple browsers (Chrome, Firefox) on Android and iOS and multiple phones.
Interestingly, the problem doesn't persist when I try it in the mobile view of Chrome developer tools.
Thanks in advance for any advice!
Update: I refunded the wordpress theme above and created my own theme.
We're experiencing an issue with an iframe lightbox that occurs mostly on iPad's. The issue is sporadic, sometimes we can get it to scroll, other times it cannot scroll at all.
Here is a live example: http://story-teller-doreen-61750.bitballoon.com/
View this on an iPad, iPad Air, or iPad Pro using safari.
You'll notice that on the iPad, the background with the content scrolls, but the iframe does not scroll. However, sometimes when you change the orientation from portrait to landscape then back, the scrolling then works.
Is there a known solution to this issue? We've already attempted to try all the workarounds posted in various threads on stackoverflow and github with others experiencing this issue using bootstrap modals, but have not had any luck.
I use position: fixed to create a fixed top navigation menu on my mobile web application.
After adding -webkit-overflow-scrolling: touch, the scrolling works smoothly. However, the top menu disappears during scrolling. It shows only after the scrolling stops.
I have searched many solutions, such as CSS3 property webkit-overflow-scrolling:touch ERROR and iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch. However, the given solutions are not working for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/ (visited from iPhone 5c Chrome/Firefox).
Did I miss anything?
After two days struggling, I found this post saves me: 100% screen height css.
I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).
I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.
I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79