I have this demo app
It works as intended in mobile safari (and desktop) but when I add the page to homescreen I can no longer click (ng-click) the card heading to toggle class to show full contact card. Any idea why that only happens when in standalone mode?
I have it as a codepen here as well
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<div class="mdl-card__title mdl-color--blue-grey-500" ng-click="showCard($index)">
Related
I'm trying to create a component (here named "meta-info") which renders a meta-tag with dynamic information (which is being fetched via Rest-Webservice) into the head-tag.
Problem is: In the processed html the component won't stay in the head but gets rendered into the body as the first element, and every script and style tag in the head which follows the component in the code also gets moved into the body. It's like the component automatically opens a body-tag. :-(
Anyone got a tip of how to achieve what I need?
<!DOCTYPE html>
<html lang="de" class="app-basic-an" ng-app="app">
<head>
<meta charset="utf-8">
<title ng-bind="$ctrl.title"></title>
<meta http-equiv="cache-control" content="no-cache, no-store">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta-info></meta-info>
[...]
</head>
<body>
[...]
</body>
</html>
An AngularJS not allow views to set the page title and insert extra elements into the head.
Try to use additional module angularjs-viewhead for it
https://github.com/apparentlymart/angularjs-viewhead
var app = angular.module('myApp', ['viewhead']);
<meta view-head name="description" content={{metaDescription}}>
I am working very hard to get audio to play on my mobile phone with react 360. Through reading various documentation, I've learned that in order to play audio on mobile, I need to enact an html entity to create a user interaction. Once a user interacts by clicking the button, audio should be able to play on mobile. This does not seem to be the case.
In my index.html file I have the following code:
<html>
<head>
<title>ExampleVR</title>
<style>body { margin: 0; }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Attachment point for your app -->
<div id="container">
<button id="enter" onclick="enterApp();">
Click to Enter VR
</button>
</div>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
function enterApp() {
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
}
</script>
</body>
</html>
As you can see, I have created am html button that when clicked, loads my React 360 code . However, when I click a VrButton in mobile, it still does not play. I've followed the recommendations as documented and it works on all browsers on desktop with the exception of mobile. Does anyone know how to fix this problem?
This was the solution to fix the audio issue:
https://github.com/facebook/react-360/issues/652
Based on superluminary response here I've set up an Angular 1 app without Hashbangs and html5Mode(true) and rely on Google to execute javascript. The page is being indexed by Google but dynamic titles and description tags are not.
My index.html head is the following:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="author" content="me">
<meta name="robots" content="index,follow">
<title ng-bind="meta.title">Temp Title</title>
<meta name="description" content="{{meta.description}}">
<!-- Scripts & CSS -->
</head>
The title and description are correctly loaded but they don't display on Google.
How can I do that?
Also does this technique works with Facebook and other social networks? Thank you.
Why you don't use something like that?
https://github.com/steeve/angular-seo
Actually superluminary response here has the solution. HTML page head must be sent fully resolved by the server.
So in order for this solution to work I was forced to replicate angular routes in the server side and send the info resolved.
Instead of using a plain html view I changed to .ejs and also changed the header to something like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<meta name="robots" content="index,follow">
<script type="text/javascript">
window.title = <%- JSON.stringify(precomposition) %>.title;
</script>
<title ng-bind="title"><%= precomposition.title %></title>
<meta name="description" content="<%= precomposition.description %>">
<!-- More meta information -->
<!-- Scripts & CSS -->
</head>
Now when the website gets a direct hit (initially resolved by the server instead of Angular, always the case for crawlers) I handle the request server side:
//Express route
app.route('/').get(precomposition.render);
//precomposition
exports.render = function (req, res) {
const precomposition = {title: 'tile', description: 'description'};
res.locals.precomposition = precomposition;
res.render('index.ejs');
};
If it's not a direct hit Angular handles the title update (because the other info is not displayed to the user).
It has off course some downsides but Google since October 2015 recommends this approach instead of "_escaped_fragment_ URLs". Also I think it's a lot less resource consuming than the selfhosted pre-render alternatives and cheaper than the paid ones.
I'm trying to share some content of my AngularJS website in twitter using next link:
<a href="https://twitter.com/intent/tweet?text=http%3A%2F%2Fwww.test.yanpy.com%2Fes%2Fblog%2Frutas-para-navegar-por-ibiza-y-formentera">
When I click on it, the Twitter share page is opened. However, I would like to use Twitter Cards. I added this twitter cards tags in my page:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#Yanpy_com">
<meta name="twitter:title" content="Sailing routes around Ibiza and Formentera">
<meta name="twitter:description" content="Post description">
<meta name="twitter:image" content="http://yanpy.test.s3.amazonaws.com/img/blog/sailing-routes-around-ibiza-formentera/cala-salada-ibiza-1.jpg">
But for some reason it is not working. I used the Twitter card validator with my url: http://www.test.yanpy.com/es/blog/rutas-para-navegar-por-ibiza-y-formentera
It looks like it's ok. However, when called from my anchor in my website I just see the text field.
#AnidMonsur is right don't show a card preview into the twitter web page, but you can see the preview into the validator, https://cards-dev.twitter.com/validator
Try with:
<meta name="twitter:image:src" content="http://..." />
instead of:
<meta name="twitter:image" content="http://...">
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});