I have a website that uses Bootstrap3 and mvc5. Its full responsive but wanted to add a little something extra with the ability to save to home page and present it as a web app.
I did all the correct head tags
<meta name="apple-touch-fullscreen" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
and added the javascript from https://github.com/stylr/iosweblinks to prevent the a links from opening in safari.
The issue i have is when a link is called it refreshes the entire page. The top nav menu refreshes and reloads every time. It looks like crap. When in safari it doesnt do that. Its nice and smooth.
Has anyone experienced this?
Related
I don't know where to start with this, my default link preview for my site looks like this:
I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:
so I was expecting that the link would have the image and the title(blacked out).
But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?
Thanks for the help.
Your problem is this line in your <head>:
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.
Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.
TL;DR: Remove this line.
For future reference, you can use Facebookâs Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.
Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />
Example from https://ogp.me/
You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.
I am making a react application. When I open the application in chrome browser, it gets zoomed in. I have to zoom out chrome to 75% to see the actual applicatio. In 100% my application looks all zoomed. Why is this happening and how can I solve it?
Check your head section for metatag declaration. Mostly there should be the problem with user-scalable value. It should be 1.0 for perfect result.
Here is the full code for correct meta tag
<!-- For 100% page rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- OR
* To lock the zoom of the page -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
If its not working well for you, please share your website link to review further.
Is there any way to remove safari address bar in iOS 9.0.2?
I have tried below things to hide address bars but no success.
1. added metatag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
2. added JS code.
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
But no success. can anyone help me with this?
The only way I know is to use your website as a web app. You have to add in your header the following:
Add this for IOS
<meta name="apple-touch-fullscreen" content="yes">
and for Android
<meta name="mobile-web-app-capable" content="yes">
after add your web site to Home screen. It will create an icon on your iPhone screen and when you click on it, the app will start in full screen mode without the address bar
Update 2019:
This might not be relevant anymore, please consider Progressive Web App
https://developers.google.com/web/progressive-web-apps/
I am developing a webapp using angularjs and jquery. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese.
navigator.language = "zh-CN"
But I cannot remove the meta viewport tag from the index.html , just for the webapp to load when the language is set to Chinese.
May I know the reason why the meta viewport tag is creating this problem when navigator.language is set to Chinese ?
Is there any other alternate solution to make my webapp working with the meta viewport tag ?
Below is the code that I have in index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=360.1, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="format-detection" content="telephone=no">
<title>Test</title>
The above will not work if mobile language is set to zh-CN. But works fine if I remove the viewport tag.
Please help on this. Appreciate all your inputs.
Please forgive any breaches of protocol and correct me if need be: long-time reader, first-time poster here. I could not find any solutions online that worked or were terribly recent and I was wondering if anyone else had encountered this.
I've been enabling full screen on a web page with meta tags and adding a shortcut to the home screen. I recently upgraded to iOS 8.0.2 on an iPad Air and have noticed that the status bar information (iPad, Wifi, Clock, battery, lock) are now on top of the top edge of the website window instead of over an unusable black status bar. As well, there seems to be white dead space now at the bottom of the page, probably displacing the now non-existent status bar.
Does anyone know how I can either revert back to having the status bar or use the bottom part of the page using javascript?
Many thanks for any help you can provide. I've attached some screen shots and some brief code below.
Cheers,
Kurt
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta id="extViewportMeta" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<title>Full Screen</title>
<style>
body {
background: #0000FF;
font-size: 140pt;
}
</style>
<body>
A<br />B<br />C<br />D<br />E<br />F<br />G<br />H
</body>
</html>
Images here:
http://postimg.org/gallery/2cm224s78/
Had the same problem and found this little gem of a fix...just put it in the head of your document ::
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
iOS 8 status bar overlay + footer 'bar' in HomeScreen web applications