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.
Related
I'm attempting to embed a WebView into a BorderPane as it's middle component. My app starts initially in an unmaximized mode. If I maximize the application, the webview will resize accordingly, but the html & css content will not fill the whole area (it is centered in the WebView). How would I go on fixing this? I've tried to call impl_reapplyCss() and friends, but nothing seems to help.
This is similar issue with Focus on input field and orientation change messes up zoom level on iOS 6 Safari but link is for App, and not the site.
I have following meta tag (please note that zooming is purposely disabled - not my call, client's request :D)
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0">
With zooming disabled and max-scale set to 1.0, orientation change works fine when you are just browsing the site. However, when you focus on input and change orientation, it starts to add some weird stuff on page.
When changing from:
portrait to landscape - iPad adds some black block at bottom of the page.
landscape to portrait - width of page gets wider. I inspected the element using mac and that whatever the space added is outside of html and shows up even with overflow: hidden; on both html and body tag.
Same issue happens on sign-in page of google - orientation change works perfectly fine when not focused on input fields, but when you focus on either email or password field and change orientation, iPad zooms in for some reason (you have to focus from portrait then once keyboard is visible, change orientation to landscape, it zooms in).
Luckily for Google, user is able to zoom-in and out but for me there's requirement from client that zooms has to be disabled.
Anyone have any workaround about this issue?
Thanks in advance!
I have found that this issue appears when page height is not set or set to 100%. I just set min height for page container.
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I have a web page that doesn't (and shouldn't) allow zooming on the iPad. Everything works great, except in this scenario where multiple tabs are open in Safari:
1. have focus on my application's tab
2. change to a different tab
3. switch the iPad's orientation (i.e. portrait to landscape or vice versa)
4. switch back to my web apps tab
The iPad, in many instances, will have zoomed in and there is no way for me to reset the zoom. Since I have zoom disabled via the viewport meta tag the zoom shouldn't be changing. To make things even stranger: IF I REFRESH THE PAGE OR EVEN NAVIGATE TO SOME OTHER WEBSITE THE ZOOM WILL NOT REFRESH.
I've also noticed this occuring on other websites. I've tried every conceivable meta tag combination (that disables zooming). I'm testing with an iPad 3. If I only have one tab open in Safari I have no issues.
This doesn't seem to be related to the "famous" orientation issue as the undesirable zoom occurs when the application does not have focus
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
Here is how I fixed this:
1. use the onorientationchange event to detect if the zoom is changed
2. if the zoom has changed change the viewport meta tag to: user-scalable=yes
3. on $(window).resize or onorientationchange change viewport back to user-scalable=no if the user has changed the zoom back to fit the screen
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