I'm currently building a mobile web app, and am using <meta name="apple-mobile-web-app-capable" content="yes"> in the header.
The app displays fine in the Safari browser on iPhone and iPad, however once it is saved to the home screen and launched from there, the stylesheet is not being read at all. If I add inline styles to elements they are read, but nothing from my style.css takes effect.
Is this related to the manifest at all, or is there something else I need to change?
This Works fine for me in my iPhone, Check out the Screenshots----
Related
I am just beginning to dip my toes into the PWA waters and have started by playing with the manifest.json on a site I am building. My goal is to get it to open up in fullscreen.
I am getting some very strange behavior on iOS.
I add the PWA to the home screen fine and it correctly uses the short name as specified by the manifest. But when I try to open it things go off the rails. The app seems to attempt to load in fullscreen per the manifest but then stops and the website instead opens in a new Safari tab, twice. I have two new tabs both pointing to the URL of the PWA.
Does anyone have any idea what is causing this strange behavior?
Hopefully this is not too late for you.
I had the same problem and I realize it is course by manifest link tag in the header:
<link id="manifest_link" rel="manifest" href="/manifest.json">
The moment you have this, any link or redirect from your PWA will launch Safari regardless of internal or external link.
One solution is to have the link remove from header with javascript after you load the file:
var manifestlink = document.getElementById("manifest_link");
document.head.removeChild(manifestlink);
However that might course some issues for android. You have to test your scenario with on both thoroughly.
This is a problem I've been noticing since the youtube embed design change, at least from what I've noticed.
So what's happening is any web pages that have been added to homescreen that have a youtube video embedded will autoplay the first youtube video on screen in the youtube app. This doesn't happen when you open the same web page is opened in safari.
Basically any web pages that have a youtube video embedded are inaccessible due to it automatically redirecting you to the youtube app.
How can I stop this? Or is it something they've added that can't be fixed?
Update: found similar question with the proper workaround Embedded YouTube videos in HTML5 standalone app iOS 8.3 opening YouTube app
Unfortunately, the only workaround I've found so far is to disallow web application to runs in full-screen mode by removing:
<meta name="apple-mobile-web-app-capable" content="yes" />
Neither postponed iframe injection to dom, nor even putting iframe in iframe helps.
I really hope that it is not the intended behaviour and it will be resolved soon via iOS update; though until then I have to use server-side to detect OS 8_3 in useragent and deliver them modified version of webapp.
I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.
Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.
I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
Thanks!
Make sure you include a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.
Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.
I developed this website
It looks fine on most browsers and OSes on PCs. It even looks nice on my HTC with Opera Mobile. Unfortunately I keep getting reports about how it displays on iphones. I don't have an iphone so here are my questions:
Is there an easy way to reliably check (emulate) my website on iphone (I tried sites like this
but what this site does it opens iframe in safari trying to emulate ihopne native screen size, but the problem is somewhere else...)?
Any quick tips on obvious mistakes I made?
Thanks for help
If you have got a computer with MacOS installed (it could even be a hackintosh), you can install Xcode there and then run the iPhone simulator from it. Once you are there, you can open Safari in the simulator and enter your site URL to have a look.
I am also attaching a snapshot of the simulator with your home page.
You might try defining the viewport in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Also, have a look at the other meta tags available in Mobile Safari.
I partially found the answer. As it turned out most mobile browsers (including safari for iphone and default browser in samsung galaxy) don't support
{ background: transparent;}
So I need to provide fallback colour as described here: http://css-tricks.com/rgba-browser-support/
Now I've seen loads of websites that look great on the iphone, such as http://twitter.com and http://deviantart.com however I can't for the life of me get the right structure within my mobile web application to make it show up as if it was an iphone application.
I've discovered iphone jquery ( http://jqtouch.com ) which seems to be the most promising javascript lib for developing nice effects to make everything look authentic. However I'm still having issues with getting the website to fill the screen on iphone safari.
I can never find any resourceful websites that actually explain how to get the effect of having it fully zoomed in and filling the screen.
Are there any libraries that help develop websites for mobile devices such as iphones.
To run fullscreen the webpage needs to be run as a webapp (bookmaked on the homescreen). You also need to indicate in your HTML that it is a web app.
Taken from this website :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The one I've used this in the past is the iui library and it worked well for my case. The example code makes it pretty easy to understand.
Or checkout JQTouch. You can get up and running very quickly.