Unable to access our angular website on Iphone? - android

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WorkFridge - A Magic Box</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Unable to access our angular website on iPhone but can be accessed on the android phone. we are getting a black screen on iPhone.
website url: http://stage.workfridge.com

Related

Showing a web page in a phonegap app - android

Trying to display an existing web page in a phonegap app. It seems like this was a big topic in 2014 but none of those answers seem to apply now.
Here is what I've done in index.html. It works in a web browser but not in the app. Has anyone worked this out? Maybe I am missing a permission somewhere?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
</head>
<body onload="window.location.href='http://www.google.com'">
<script type="text/javascript" src="cordova.js"></script>
<p>hello</p>
</body>
</html>
This also works in browser but not in phonegap...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=https://www.google.com" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This also does not work...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
HELLO
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Here it is, cost me $100 on upwork. I hope it saves somebody some headache!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('https://google.com', '_blank', 'location=no');
}
</script>
</body>
</html>

How to Show App banner on iOS and Android

I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that

How to display my app's first page in phonegap android app?

I am trying to create an app with phonegap. in iOS, my app works properly. but in Android, my app's first page is not working in app and it always launches a system browser.
https://www.youtube.com/watch?v=ix2M7XdRN7c&feature=youtu.be&t=4m12s
index.html
<html>
<head>
<META HTTP-EQUIV="refresh" CONTENT="0; url=http://www.google.com/">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>title</title>
</head>
<body>
<script type="text/javascript">
window.location.href = "http://www.google.com"
</script>
test link
</body>
</html>
I tried many ways for fix it. ex) use 'meta tag', 'window.location.replace', and 'window.location.href' ...
but my app still launches a system browser just in an android platform.
Please let me know, how can i display my first page without launching a system browser.
Have you tried changing the config.xml ?
<content src="index.html" />

<p:editor> does not show toolbar in Android environment

I have a problem with primefaces editor . It run smoothly on my chrome and IE
However, it does not display its control on my android emulator when I connect to my web on localhost .
This is my code for it
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
<title>Piccolo Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'></link>
<link rel="stylesheet" href="css/bootstrap.css"></link>
<link rel="stylesheet" href="css/bootstrap-responsive.css"></link>
<link rel="stylesheet" href="css/jquery.lightbox-0.5.html"></link>
<link rel="stylesheet" href="css/custom-styles.css"></link>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/style-ie.css"/>
<![endif]-->
<link rel="shortcut icon" href="img/favicon.ico"></link>
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"></link>
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png"></link>
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png"></link>
<h:outputScript library="js" name="bootstrap.js"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<!-- <script src="js/jquery.custom.js"></script>-->
</h:head>
<h:body>
<div align="center">
<h:form rendered="#{userSession.isLogin}">
You are #{userSession.username}
<br/>
Article header: <h:inputText value="#{userSession.updateArticleTitle}"></h:inputText><br/>
Article content:<br/>
<p:editor width="800" height="800" value="#{userSession.updateArticleContent}"></p:editor><br/>
<h:commandButton value="Update Article" action="#{userSession.doUpdateArticle}" >
<f:param name="articledate" value="#{userSession.updateDate}"></f:param>
</h:commandButton>
</h:form>
<h:form rendered="#{!userSession.isLogin}">
Please login first !
<h:link value="Return home" outcome="HomePage"></h:link>
</h:form>
</div>
</h:body>
</html>
Can anyone explain ? My p:calendar works fine both on web and android emulator but p:editor can't :(

Android Splash Screen WepApp Sencha

I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>

Categories

Resources