I've come across an interesting problem with UIWebView.
I basically want to use a UiWebView on an iPad app as a modal pop-up to show wikipedia or amazon mobile pages if the user performs certain actions.
I have the code to create and load the UIWebView working fine, but the content loaded pays no attention to the width of the UIWebView. I wanted the UIWebView to (roughly) be the width of an iPhone screen and have set the frame accordingly.
However, when the content loads it appears that it loads at the width and height of an iPad screen so it scrolls both horizontally and vertically. Vertical scrolling is fine but horizontal is not.
When the same URLs are loaded on the iPhone (just in safari), the content resizes to fit the width of the device, which I assume is using a meta-tag?
The question is, how I can replicate this behaviour in a UIWebView on the iPad and "force" the content down to a set width.
Update
Apologies, this is a duplicate of the question answered at UIWebView -- load external website, programmatically set initial zoom scale, and allow user to zoom afterwards
This solution is smart and works.
The size of the content will depend on a mix of the size of the browser's viewport, as well as the HTML / CSS that is implemented on the site.
As you are saying the site scales correctly in Safari, Check the frame of the webView is correct in your app. Sometimes the site may have implemented aspect ratio comparisons to work out which responsive view to show, so experiment also with the height of the modal to match the size of an iPhone.
Another thing you can try is setting constraints on the webView. I've found setting constraints will also sometimes alter the viewport size & rendering.
If that doesn't work - You could also try scaling the content. The answer here will help: HTML Content fit in UIWebview without zooming out
Related
I need to display a series of banner images from the web inside an iOS app. Pretty much like this:
I'll get the list of images to be displayed from an API call.
My struggles started when I started considering what should happen when the user rotate the phone. Given the constraints, the image will expand, keeping aspect ratio and leading and trailing distance of 15 from the superview.
Given that screen resolutions are very diverse, what should be width of the images saved on the server? Rotating the phone doesn't change screen scale, right?
But the available width changes. So, should I send the width available so the server can either generate or return the appropriate image? But then, I need to find a way to get notified when the screen rotates and reload the appropriate image, right?
Is that the right way to go? Or maybe webview would be the best option here (even though I'm gonna need to handle click events for those images)?
I'm working on an ios app written in swift, xcode7
A view has a UIWebView on it.
using loadRequest(NSURLRequest) we load a pdf file from disk.
This works fine, but sometimes the pdf file cannot be scrolled past the first page or what you see first on the screen. I can't pinpoint what causes the not-scrolling as sometimes I open the same file again and then it scrolls.
Trying to scroll when it doesn't want to bounces the bottom part of the screen and you can see there is another page, but you can't scroll it into view.
The UIScrollView contained inside the UIWebView (this is the default) knows there are more pages, because it shows "1 of 3" on screen.
The UIWebView
has 'scales page to fit' checked
has 'user interaction enabled' checked
has 'multiple touch' NOT checked
has 'autoresize subviews' checked
has mode 'Scale To Fill'
I have tried the following:
checking if the scrollview is not larger than the screen by placing a border around it: no, it fits on screen and is as large as you would expect
setting the internal UIScrollView.scollEnabled to true in code
In the application, when showing the UIWebview, it is resized on screen by collapsing an element above it, but I have tested this with fixed heights and it doesn't change anything.
When I call flashScrollIndicators() on the internal UIScrollView, this is consistent with the scrolling or non-scrolling. If you see the scrollbar flash, then scrolling is possible. If not, then you can't scroll past the first page.
Any other ideas I can try?
This sounds like a weird UIWebView problem.
Two additional things you can check :
Is the issue resolved after you rotate? (had this happen to me once)
If you call flashScrollIndicators on the internal UIScrollView and it's not responding. Is the internal UIScrollView a nil object?
Another solution is to try and use WKWebView. It might resolve the issue. Just be sure to only use it in the last versions of iOS.
You can also step down a layer and implement it with CoreGraphics since you have the PDF on the device itself and not on the web (official docs). There is probably a good CocoaPod or Carthage framework you can use for this.
The underlying problem was the fact that before loading a new pdf, the UIWebView was cleared each time by loading 'about:blank', which is the most suggested solution to clear the webview. However, when working with pdfs with different page sizes and different number of pages, this seems to mess with the built-in scrollview.
The solution in this case was to create a kind of 'blank' pdf with a single page (and maybe an application logo in it to distinguish it clearly for the user) and instead of loading about:blank, load this pdf instead before showing the webview to the user and while waiting for the real pdf to download to the device.
We have a native iPad app that relies on a couple of webviews for specific functionality (say login).
The webview renders a page from the website that is responsive. The webview is a popover that is not fullscreen within the app (see attached image).
The problem is: The loaded page renders the page as if it is loaded in the native iPad resolution (1024x768) but we want it to have the size of the popover webview in the app. Is this something you can do with a particular media query or is this something that must be set in the app itself?
Ok the problem is, your web page searching for the device ID and not for the real dimension in PX, I'm sure if you try to stretching a WEB page on your computer the dimension is responsive, but on the devices your META searching a device type, you have to try two ways:
1) Uncheck in xcode on UIWebView the flag Scale Page To Fit it is possible to solve with this.
2) you have to check your Responsive script on your web page and adding a exactly resolution of your popup in xcode.
Hope this can help you ;)
I'm considering using VirtualSurfaceImageSource in my application, and I've implemented something similar to the Direct2D magazine app sample, but I've run into a problem which occurs when the virtual surface is several times larger than the display area.
Basically, I have a horizontally scrolling ScrollViewer which contains an Image. The source of the image is a wide VirtualSurfaceImageSource (at least ~10000 x 500 px). The width of the ScrollViewer is 1280 px.
When I scroll the scroll viewer with touch panning, the image sometimes flicker - a part of the image disappears and then it's redrawn. This usually happens when the inertial scrolling stops. The image is already fully drawn when it scrolls into the view, but for some reason it's cleared and IVirtualSurfaceUpdatesCallbackNative::UpdatesNeeded() is called.
I've uploaded a video which illustrates the problem. Watch what happens when the scrolling stops (at 0:02, 0:17, etc...)
Any ideas why this is happening?
I've also noticed that the flickering doesn't occur if the image width is ~5000 px or less.
If you want to reproduce this, start from the Direct2D magazine app sample and add more text in the Sample.story, under the <text name="butterfly-body"> tag - just copy the existing text 10 times or so. Try scrolling the butterfly page in both directions and with varying speed, and you should see what appears to be the same problem.
I've asked this question in an MSDN forum, but so far I've gotten no answer.
This is no longer an issue in Windows 8 Release Preview, so it was probably just a bug in the Consumer Preview.
We're currently working on an iPad version of our web application at work. We are seeing inconsistent behavior with regards to two-finger scrolling on scrollable areas within others scrollable areas across two iPads. Both devices are iPad2 models.
On one device, dojo grids and trees require one finger to scroll. On the other, they require two fingers to scroll. On both devices Safari is being used to view the website.
What could cause this behavior? Is there some setting we haven't discovered that dictates whether you need to use 1 or 2 fingers?
Looks like it's a difference in IOS versions (one is on 4, the other on 5).
It's important to note that
-webkit-overflow-scrolling:touch is not the same as one-finger scrolling enabled by iOS5.
-webkit-overflow-scrolling uses the iPad's built in functionality (the touch acceleration and bounce). However, if the contents in your div change, or you manually move the contents inside the div (ie you made your own div scrollbar and are scrolling the contents), enabling this will mess things up. What it will do is make the "top" of the scroll able div wherever it happens to be located. What does this mean? If your contents are scrolled half way down and then you add new content to the div, with -webkit-overflow-scrolling:touch, the very top of the touch-scroll area will be half way down your div. You will not be able touch-scroll back to the top.