I have a site on Django-CMS and Bootstrap 3, and it has a problem on iPhone - content of the site fits the screen, but I can scroll horizontally and there is a lot of empty space to the right of the content. On desktop safari it works fine.
shrink-to-fit=no in meta "viewport" didn't solve the problem.
Related
I have created a responsive powerapp. For the screen I have set it's Height to Max(App.Height, App.DesignHeight) and it's Width to Max(App.Width, App.DesignWidth).
For troubleshooting purposes I added a label that shows the App.Width and App.Height values in my app.
When my app runs on an iOS device in Safari, which I've tried on iPhone 13 and iPad Pro 11", the reported screen size values are larger than the viewable screen in the browser causing the app to have to scroll up and down to see the entire screen. The size that is reported is actually the size of the viewable area in the browser if I collapse the browser bar (the bar with the back/forward button, address bar, etc.) at the top or bottom of the screen. When the browser bar is extended, which seems to be the default, or collapsed, the values for App.Height and App.Width do not change. However, I notice that on other, "longer" websites, the browser bar automatically collapses as I scroll up or down and reappears when I scroll the other direction. My PowerApp is not a scrollable screen and the browser bar never collapses. I'm sure this behavior is probably related to the problem.
Is there something I can do to make sure the App runs within the viewable area of the browser regardless of the state of the browser bar?
On a side note, it works perfectly fine in a browser window on my PC.
Elements inside an iframe are unable to be taped after the iframe is scrolled using window.scrollTo() or window.scrollBy()
Reproduction steps:
Visit https://victornpb.github.io/ios-scrollable-iframe-issue/
Click the buttons on the left, it changes color to show that it is working.
Click the "Scroll down" button and it scrolls the iframe down by 50 pixels.
After that the buttons doesn't work at all.
Screen capture video
It works fine on Desktop Safari, this issue only happens on Mobile Safari
I opened an issue on webkit repo here just in case.
iPhone iOS 12.1 (16B92)
I need to work around this limitation/bug, I can't add external scrolling though, because I need scroll events inside the iframe.
I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.
Here's an example I created via jsbin: http://jsbin.com/pekeca/1/
In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:
When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.
Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?
In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."
These other posts might help you:
iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306
I found Intel's App-Framework to be light-weight and fast. However, I am facing a problem that I just can't seems to overcome. In the framework, one can display a navbar that 'stick' to the bottom of the screen. This work fine on the browser, WebView in Android and UIWebView in IOS - except on iPhone with 3.5" screen - the navbar just didn't show up. It appears that the screen is too short to show it.
I have tried playing with "viewport" meta tag by setting various 'height' and disabling & changing OS theme. Nothing works. Anyone has experience on this? How do I adjust the navbar position?
As it turns out, it is not the problem of App-Framework; it is the way UIWebView is placed on the view. After correctly setting UIWebView's top and bottom constraints, I am able to see the navbar correctly set at the bottom of the screen.
I have a website that when I load in Chrome on iPhone, the width loads perfectly however when I add that url to a webview in my iOS app the web page seems to scroll slightly horizontally, its not quite an exact fit
Any idea why this could be?
There is easy fix.
Go to interface builder and make option Scales Page To Fit checked