I have the following in the header of my web app. When I try to add my app to the home page of my devise it is still using a screenshot of the app. Am I missing something?
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="CoPrayers">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
The links are there. If I view the page source I can click on them and they appear.
What am I missing? Thanks.
Related
I made Rails app and released.
I set ogp and twitter card by using meta-tags gem.
However,Twitter Cards Validator could not find any meta tags.
The browser shows codes blow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美味しい和菓子が見つかるメディア | MOMIJI</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta name="description" content="美味しい和菓子が見つかるメディア">
<meta name="keywords" content="和菓子, スイーツ, momiji">
<link rel="canonical" href="https://momiji.work/articles">
<meta property="og:title" content="MOMIJI">
<meta property="og:description" content="美味しい和菓子が見つかるメディア">
<meta property="og:type" content="website">
<meta property="og:url" content="https://momiji.work/articles">
<meta property="og:image" content="http://momiji.work/assets/wa_1.jpg">
<meta property="og:site_name" content="MOMIJI">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MOMIJI">
<meta name="twitter:description" content="美味しい和菓子が見つかるメディア">
<meta name="twitter:image" content="http://momiji.work/assets/wa_1.jpg">
<meta name="twitter:site" content="#Justin0370">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="jcjt5ya59ZrydFwnxiBcOdi7w3O5sXXSe6QXktFwt6uygvwi/DYmaTgV0yx0HbP/P8l1Zvsz5x5APEjlzsfE5A==" />
<link rel="stylesheet" media="all" href="/assets/application-c4248fae82b61852d60924641256d5953280f16c38ed2795e77c3a303f6fa588.css" data-turbolinks-track="true" />
<script src="/assets/application-0d8e513de520a20d78d2ba43d84d1c021d3937e16f681fee552500eb92297b4e.js" data-turbolinks-track="true"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Twitter Card Validator shows
INFO: Page fetched successfully
WARN: No metatags found
If you can know why my app can't show twitter card, answer this question, please.
I am trying to create a rails app and I have couple of css and js files to be added to rails app pipeline. These are;
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-stepsform/css/component.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootsclertrap-datepicker/css/datepicker3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/summernote/css/summernote.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<link href="assets/plugins/codrops-dialogFx/dialog.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/codrops-dialogFx/dialog-sandra.css" rel="stylesheet" type="text/css" media="screen" />
<link href="pages/css/pages-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="pages/css/themes/simple.css" rel="stylesheet" type="text/css" />
<link class="main-stylesheet" href="assets/css/style.css" rel="stylesheet" type="text/css" />
as in the theme I am trying to use. But if I only separate these css js and image, the problem is some of the css files are using img files inside their directory.For instance, select2.css uses background: url('select2.png') right top no-repeat; Or bootstrap min (I know I can add gem for this) uses url path to src:url(../fonts/glyphicons-halflings-regular.eot). So should I go over css and js files and search for their dependents?
I am so stuck in to designing this in a rails way. Thank you
require 'open-uri'
require 'json'
#result = JSON.parse(open(URI.parse(url)).read)
757: unexpected token at '<!DOCTYPE html> <html lang='en'> <head><script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script> <title>Fundly | Search </title> <meta charset='utf-8'> <meta content='initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width' name='viewport'> <script src="//cdn.optimizely.com/js/3536001.js" type="text/javascript"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="V3GRiKIwWG9+WxN7VsiNtqOnkWu1CkuutIqJ00CQLrQ=" name="csrf-token" /> <meta name='description'> <meta content='noindex' name='robots'> <!-- Facebook OpenGraph metadata --> <meta content='Search' property='og:title'> <meta content='website' property='og:type'> <meta content='https://fundly.com/search' property='og:url'> <meta content='http://fundly.com/assets/logos/v2/fundly_logo_vertical_lockup.png' property='og:image'> <meta content='Fundly' property='og:site_name'> <meta content='Start Your Search' property='og:description'> <meta content='148669528535835' property='fb:app_id'> <!-- End Facebook OpenGraph metadata --> <link href="//doapv6pcsx1wa.cloudfront.net/assets/favicon_heart-ac3d0cee1ff7eb05cfec822b455dc319.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="//fonts.googleapis.com/css?
i have created a theme in themeroller and used like this in my app
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="assets/css/jquery.mobile.1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
On first load, the new theme is used, but when i login to the app and logout, the old default blue theme appears, why is this?
Do not use jQuery Mobile's default CSS file. Instead use jQuery Mobile's structure CSS file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- YOUR CUSTOM THEME CSS -->
<link rel="stylesheet" href="your_custom_theme.css" />
<!-- JQUERY STRUCTURE CSS -->
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/pinkhash.min.css" />
<link rel="apple-touch-startup-image" href="assets/img/logo.png" />
<link rel="apple-touch-icon" href="assets/img/logo.png" />
</head>
In my application.html.erb I have:
<%= stylesheet_link_tag "application", :media => "all" %>>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
Which outputs something like this:
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
How can I add output spacing for such results?
<link href="/assets/css-reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/globals.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-2.3.1/css/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/home_screen.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-1.9.1.min.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.js?body=1" type="text/javascript"></script>
<script src="/assets/home_screen.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="wvpCKeGQlyowV18CYU4V2Vn7f+IxHTK0zSkB2XVGajc=" name="csrf-token" />
you can try
stylesheet_link_tag("application", :media => "all").split("\n").join("\n ")
but you really think it worth the trouble?
You can see your HTML properly indented with firebug or something. Also this is more bytes to load while getting your webpage.