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
Related
I noticed this with separate html code, but I can repeat the same issue using the following url example of an html web app view, such as would be used in a hybrid app. To make it easiest for someone reading this to reproduce the issue, I will include that url here (I don't need to use that url. I have my own code. But this url does the same thing, so is a good example for someone reading this to examine.)
https://framework7.io/examples/tab-bar
Image: These bottom nav bar items do not respond to touch on iPhone 6s or 6s Plus, but DO work on 5s and SE
To reproduce:
Create a simple iOS App with a wkwebview (you may already have one from a previous project)
Simply ensure the webview loads the above url, and you will be able to observe the issue.
If a wkwebview in a Swift app loads the above url in an iPhone 5s or lower within a full screen wkwebview, the bottom tab menu (with choices for information, inbox, upload, and photos) will work. But if opened in iPhone 6s or 6s Plus, the bottom tab menu will not work. You can tap on choices, and nothing will happen.
Important: This is not in Safari. This happens in the context the link being opened in a wkwebview within a Swift app. This is repeatable.
I have checked the layer debugger, and nothing is in the way of the bottom tab.
Thank you very much.
I was going to just delete this, but you never know. Someone else may have the same question later. Maybe this will help them.
So here is the answer which I have just figured out:
I hadn't added auto constraints to ensure the webview would stay the same size as the window. That is why it worked on the smaller phones like the 5s and SE (because the webview happened to aready be big enough.) Meanwhile, the bigger screens of the 6s and 6s Plus were beyond the size of the webview.
I saw it in storyboard and added constraints to ensure the webview would stretch to however big the screen was, and everything started working. The lower nav bar was no longer out of reach of my taps.
I do think it's odd that the content displayed on the entire screen, but only the area which detected touches did not extend to the screen, but that is an opportunity for me to examine the code and see how things are arranged.
The main issue has been solved.
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.
I am having issue with WebView on Xcode. I have uses framework7 for frontend since it is working amazing. When I open link in safari on iphone everything is scaled good, when I insert it in WebView and launch it on iphone the bottom of the app is cutoff, I can scroll to it (if I enable scroll), but it is not what I want to do, I want it to scale on the screen, like it does on browser.
This is it, left is safari, right webview
http://postimg.org/image/xwkuo85e5/
Please help me.
try again with adding options for webview
self.yourWebView.scalesPageToFit = YES;
self.yourWebView.contentMode = UIViewContentModeScaleAspectFit;
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 designed an web app well working on desktop browser and on ipad safari.
However, when I install it as an hybrid app with cordova 3.3.0, the height is not proper.
My footer is around 40 to 60 px upper the bottom although I have a position: fixed and bottom:0 rule in my css file.
Thanks for your help.
You might want to take a look at the following question: Div element wont stay at bottom
It could have something to with the webview not scaling properly. Hope this helps.