I use the template Citizen Journal.
I don't know if it's just for this template but there is a quiet annoying problem.
The top menu doesn't appear correctly on the iPad.
I uploaded screenshot from the Desktop and the second on the iPad here:
http://imgur.com/a/yeNCY
You can see that the menu becomes a drop-down menu that is always open.
It blocks the view of the different pages, that is really annoying.
You can test it if you have an iPad:
http://www.professorparticular.org/
I've search a lot for a solution but nothing close to what I have.
It would appear the theme you are using is a responsive theme and changes the content dimensions based on screen size/resolution. It will remove and or move some elements on the page when you view the site on a device with a smaller screen.
One quick fix for this is to go to the header.php file in the theme's files and remove the 5th line from the top. The line to remove is <meta name="viewport" content="width=device-width" />. This should fix your menu problem. Without actually going into the CSS and HTML of the theme and recoding it, this is probably your easiest option.
Related
This question already has an answer here:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
(1 answer)
Closed 1 year ago.
Have an iPad Web Application1 which will be saved to the user's home screen and function as an app.
We're using the below meta tags so it functions with as minimal UI as possible on iPad.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Initial load of the application is good with an expected small UI:
Minimal chrome
The issue comes when the user navigates to a new page. The Safari forward/back buttons appear, even if there is no history.
Expanded chrome
Question: is there any way to stop Safari from adding an expanded status bar?
This is a NextJS app if it helps, using the built in router.
1 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
The manifest.json was not loaded for the application. This made pages after the first load add the extra chrome. Incorporating missing manifest.json fixed the problem.
Same as this question:
In mobile Safari, website added to Home screen, shows gray bars on the top and bottom when navigating pages, how to make it full screen?
On my website (still in beta version), here : http://www.collectifsaga.com/X/wordpress/fr/home-fr, I have a menu hover (filters for the grid)
I have a problem on phones (I have an iPhone, I don't know if there is problem on other devices) with that hover menu.
The hover is working well (with :active in the CSS) and by adding this in the <head> : document.addEventListener("touchstart", function() {},false);
This problem is, when I tap on the hover menu, the page goes directly to the top, even if I'm on the middle or bottom of it. And that's quite tiring
Do you know how to solve that ?
You need to add:
onclick="event.preventDefault();
so you would have:
<img src="http://www.collectifsaga.com/_SAGA/_graph/icone/plus.svg" width="160px">
inside your link that shows your menu when u tap on it. You could also use span instead of "a" for it, might even be better solution as thats not link.
I've observed this on iOS 4.3 to 5.0. When you create a even a simple offline web app, meaning one HTML file + few assets such as CSS and JS (all present in the cache manifest), it works offline (I tested in Airplane Mode) – BUT, when you add such an app to your home screen and open it in fullscreen mode, it first displays initial content, then everything disappears (page becomes white) for half a second or more, then content reappears again.
You can see this by adding Glyphboard, a well-known and useful offline web app, to your iOS home screen and launching it a few times. You should see the white flash effect every time you load it.
This is a big problem because it gives away the non-nativeness of an app and gives the impression that the app is non-optimized for performance and buggy.
I've tried finding reports about this but all I can find is rumors and misconceptions about the iOS 4.3 JavaScript rendering engine fiasco, which doesn't need at all be related to this issue. But in iOS version 3 I distincly remember not ever seeing the white flash.
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available. This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
Has your HTML/CSS changed between testing IOS versions?
I've found this to be caused by the use of:
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
With a minimal page, I get a white flash between the apple-touch-startup-image and the page contents if I use the viewport meta tag. If I take out the tag, no flash.
It's possible to work around the problem by setting the tag programatically.
I think what happens here is that iOS takes a screenshot from the page when it is added to the main menu. Then this screenshot is displayed during the application loads (WebKit loads). WebKit starts rendering the page and the page itself is constructed in such a way that the page content is not instantly available, leading to a white flash which is a rendered page when page content is not yet there,
You can avoid the problem to a certain level by building your JS/CSS so that it loads the initial HTML view fast and then lazily loads / builds the rest of the resources on the background. Also you can set a custom loading screen instead of the default screenshot iOS uses from the page.
Maybe if you can take yourself a screenshot of your app and then have something like this:
<body style="background: white url('my-initial-loading-screen.png')" />
... and make sure image is available and comes from manifest.
Or even better, have loading screen which does not require any external resources to show (just plain HTML) so you know the browser doesn't need to load anything.
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
Apple says in the Safari HTML reference that the below code is supposed to make the the web-app full screen on iPhone OS 2.1 and later.
<meta name="apple-mobile-web-app-capable" content="yes">
But it doesn't seem to work. Is there a way of hiding the title/location bar within Safari in an iPad WebApp?
This only works after you save a bookmark to the app to the home screen. Not if you just browse to the site normally.
If you want to stay in a browser without launching a new window use this HTML code:
<a href="javascript:this.location = 'index.php?page=1'">
First, launch your Safari browser from the Home screen and go to the webpage that you want to view full screen.
After locating the webpage, tap on the arrow icon at the top of your screen.
In the drop-down menu, tap on the Add to Home Screen option.
The Add to Home window should be displayed. You can customize the description that will appear as a title on the home screen of your iPad. When you are done, tap on the Add button.
A new icon should now appear on your home screen. Tapping on the icon will open the webpage in the fullscreen mode.
Note: The icon on your iPad home screen only opens the bookmarked page in the fullscreen mode. The next page you visit will be contain the Safari address and title bars.
This way of playing your webpage or HTML5 presentation in the fullscreen mode works if the source code of the webpage contains the following tag:
<meta name="apple-mobile-web-app-capable" content="yes">
You can add this tag to your webpage using a third-party tool, for example iWeb SEO Tool or any other you like. Please note that you need to add the tag first, refresh the page and then add a bookmark to your home screen.
It only opens the first (bookmarked) page full screen.
Any next page will be opened WITH the address bar visible again.
Whatever meta tag you put into your page header...
This site has a working workaround, same effect, uses some javascript to set the first child div to total height of viewport.
http://webapp-net.com/Demo/Index.html
Looks like most of the answers on this thread have not kept up. iOS Safari on iPads have fullscreen support now and it's very easy to implement using javascript.
Here's my full article on how to implement fullscreen capability on your web app.