UIWebView looks like different text sign in landscape - ios

We have some text in a UIWebView. It appears when the app is rotated, that the text looks bigger in landscape. Is anyone else seeing this, and is this the expected behavior?

yes, that will happen if the content doesn't have any viewport setting.
have a read on how to config your page on apple docs https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html and/or use css to style the page.

Related

View Pager EditText hint issue in Landscape mode

Using View Pager I want to change edit text hint runtime, It displays correct hint when I scroll view pager but when I tape on edit text to write something it shows wrong hint(Hint of the previous page), you can check with gif file that I have attached.
Note: When I set Text on edit text this issue is not found, it occurs only with a set hint. I'm using 'com.android.support:design:28.0.0'. The app is in Landscape mode. It is working fine in portrait mode.
Did anyone face this issue?

AirPrint PDF cutting pages short

I'm building an app that displays a local pdf with AirPrint. When I print it from the app it doesn't fill the whole page similar to how it prints from safari. The app print is on the bottom, safari is on the top. Here is what it looks like http://i.imgur.com/0USYXf0.jpg
My code to print is straight from the sample code PrintWebView that apple provides. It has to be something in the code that apple provides because it prints the same way from their PrintWebView app.
What do I need to change to fix this?
Edit
I now believe that it is not cutting the pages short but that the pdf pages may be longer than the standard 8.5x11 page size. I think that I need to change the page size that is in the printing code. Still not sure how to get the page to scale similar to how it does in safari on the iPad.
I have figured out what the problem was. It was within PrintPageRenderer.h. All you have to do to fix it is change:
#define SIMPLE_LAYOUT 0
When you change it to 0 it scales the pages correctly for the PDF.

html5/css3, Asp.net MVC3 - View pdf in an html page on mobile safari

My upcoming mobile web project requires viewing dynamically chosen pdf files inside the webpage. I am using iFrame to display the pdf file and the file can be scrolled using two-finger scrolling. But the problems I am facing are:
The first page of the file is not displayed completely on the iPad and gets cut off along the width unlike when I view it on the desktop browsers where the first page of the pdf is always entirely displayed although zoomed out to fit in the iFrame area.
There is no visual indication for the users that the pdf document can be scrolled, i.e., there is no scroll bar on the pdf document.
The controls (page navigation, zoom etc.) for the pdf viewer (Adobe reader) don't appear on the document unlike when I see it on the desktop browsers.
What is the best way to achieve what I am trying to do? Do any of you experts know any solutions/workarounds to the problems I am facing? An entirely different approach using anything other than iFrame can also be considered.
The reason why the pdf should be inside the html page is that, the list of pdf files will be on a menu bar on the left side of the page and the user can click on any of them to view on the same page. Ideally, they will have the capability to toggle between full screen view and that view.
Any help is appreciated.
I created a tiny JavaScript module that helps you to show a PDF inline and be able to scroll it. But I also couldn't figure out a way to make it fit the total width of the parent container.
Check it out: https://github.com/williamrjribeiro/ipdf-scroll
Cheers.
I came across this Recommended way to embed PDF in HTML? while researching on the web to find an answer.
The mentioned link discusses about some options that I can use and the google document viewer works for me though don't know if there is anything (like data limit) I need to be aware of before using it on the website. Also I have no idea if it is a good solution (though the full screen mode is not available, but zoom-in/zoom-out and next/prev page buttons are there are show up in the mobile safari on the iPad) to use for an web app that will be run on the iPad.
Anyway, I will keep researching for a better solution and if i don't find any, I'll stick to the google document viewer.
The issue appears to be a bug with Safari on the IPad.
I didn't find a solution for embedding the pdf in html but I did find this:
If you return FileStreamResult from your controller action instead of a view, the pdf will open in a new tab, it's not embedded html but at least your user is not having to download files and open them manually.
I had the same problem of the pdf not being displayed completely. The only thing I found to fix this was the change the size of the div containing the pdf.
For example if the element containing the pdf is a div then I change its width to any value and the rollback to the value it had before. Changing Width or height any one works.
Sometimes I had to wait a little using a setTimeout before calling my resizable method

Make a website automatically load in Landscape view on an iPad

I'm wondering if anyone can help me. I have created a website and I want it to automatically load in landscape view on the iPad. Is this possible and if so can it be done with javascript or css?
You can't change the frame (the Safari window, status bar, URL bar, etc) from inside JavaScript / HTML, but you could wrap your whole site in a div and add the "-webkit-transform: rotate(90deg);" attribute when you detect that it's in portrait orientation.
That will display your site in landscape, but the user will probably then rotate the device itself into landscape which would then rotate your content incorrectly oriented relative to the user. You'd have to detect that using JS and remove the CSS attribute above when you truly are in landscape. If you're using jQuery or something I could imagine it being relatively easy, but the user may still see a bit of flickering as the content bounces around.

Scrolling on iPad for an iframe within GWT window

PLEASE NOTE: This is not a "use two fingers to scroll" problem. Whether it is one finger, or two, or three, or the whole hand, for some reason our iframe does not scroll on an iPad. :)
Here is the scenario:
In our web application, which is built using EXT-GWT, we have a few windows that open as (maximized) pop-ups and present some forms to the users. These forms, which are most of the times external, are rendered in an iFrame and some of the forms have their content collapsed at the initial load - the user can choose to expand any section of the form, fill it in and submit. Now everything works fine except the scrolling in iPad. After the iframe's content is loaded and collapsed (collapsing is done using JS on the client side, basically, the content loads as expanded by default and then is collapsed by JS) iPad just fails to provide scolling to the iframe. Even after the content of the iframe is expanded the iframe does not get any scrolling.
As of now, we have solved this problem by increasing the height (using JavaScript) of the EXT-GWT window to the size of the expanded iframe body content. This makes the whole window scrollable, instead of just the iframe within the window. While it works, the window becomes way to big, so I was wondering if there is any better way for us to provide scrolling to the iframe.
Thanks for the help,
Nitin
For iOS devices you need set overflow: auto; or the scrolling won't work. For my web apps I used fancybox to display iframes modally and once I change the overflow setting in the css file the two finger scroll worked perfectly on the iPad.
After trying (almost) everything, I have come to the conclusion that increasing the GWT window height to the iframe.body.height is the only solution for getting the window/iframe to scroll on iPad. Hopefully, this will help someone in future.
I´m pretty new to GWT, but for me it worked like this:
The parent-div of the iframe has a class in my case, x-component.
I made an entry to my css file like this:
.x-component{-webkit-overflow-scrolling: touch; overflow:auto;}
It works as well if I set these entries not to the class, but to the div-element itself.
Hope that helps

Resources