I am using custom policies and custom html in Azure B2C which is all working well except for the favicon on Safari (only).
My head includes the link for safari pinned-tabs
<link rel="mask-icon" href="https://xxx.blob.core.windows.net/b2cweb/safari-pinned-tabs-favicon.svg" color="red">
However, when run the dev tools show for the Azure B2C SignUp/In
<link rel="mask-icon" href="https://xxx.blob.core.windows.net/b2cweb/safari-pinned-tabs-favicon.svg">
hence the color property was stripped away.
Is this a bug and how can it be fixed?
Thank you
Related
Is it possible to set a custom favicon to the AWS Cognito hosted UI?
I am aware that the Cognito web interface offers a number of CSS customization but favicon was not among them.
I don't think so. https://forums.aws.amazon.com/thread.jspa?threadID=283090
Interestingly, when you do a re-direct from your site that has a favicon to your Cognito UI page for authentication then Chrome seems to carry your favicon over to the Cognito page and displays the icon in the tab. That only seems to work once you have gone through the authentication at least once. It does not work for other browsers. Maybe it is a bug in Chrome.
At my new company I am maintaining a VB.Net webforms application. We are seeing an issue when viewing the site on an iPad that can be fixed by Requesting Desktop Site in either Chrome or Safari.
Is there a way to force this in code so the user does not have to hold the refresh button in Safari and request the desktop site?
UPDATE:
We are using Telerik controls and the functionality changes when its displayed on an iPad vs a browser on a desktop. When I pull up the page on an iPad the textbox filters will not work until I select Request Desktop Site, see below for wrong incorrect version.
Here is what it looks like after that is selected and normally on a desktop browser.
So I need a way to force the browser to request the desktop site/version when viewing on an iPad.
Without some examples its tricky to comment on this, but I think I know how to get the result you want. In the HTML of the page(s):
<meta name="viewport" content="width=device-width, initial-scale=1">
Source here.
This should fix the issue you're seeing in all browsers, if it is what I think it is.
Edit: Question has been significantly updated, this is definitely not the right answer.
When you generate an app with Vue CLI 3.0, and select PWA support. It generates a public/manifest.json file. However, these settings are not used in the meta tags, for example changing the theme color in the manifest.json file will not change the <meta name="theme-color" ...> tag.
To configure this you have to follow the readme of the #vue/cli-plugin-pwa and add the options in the vue.config.js file.
So what is the manifest.json file for?
Basically, you've just initialised a fresh Vue progressive web app (PWA), so the manifest.json is potentially required for progressive web apps, manifest.json gives you the ability to control how your app could behave when a user expect to see an app (Mobile device's home screen), for example, add a splash screen to your app when the user gets access to your app through the mobile, configure the push notification sender_id etc ...
If you want to know more about Manifest, please check Web app manifest.
from 21 April google launch Mobile Freindly website algorithm. I used the meta name=viewport content="width=device-width, initial-scale=1" Tag but its not working . what i should do now for this.
The release you are referring to by Google on the 21st of April is a push to get site owners to make mobile friendly versions of their websites. Simply by placing viewport markup into your website does not make it mobile friendly, the design needs to respond to the resolution of the device you are viewing the website in. Recommend looking more into "Responsive Website Design". If your site is too big to do a redesign before the 21st, consider making an m.yourdomain.com mobile version of your site while you work on a redesign to responsive.
To check if your website will pass the mobile friendly test by using Google Webmaster Tools Mobile Friendly checker tool: https://www.google.com/webmasters/tools/mobile-friendly/
Hope this helps.
VS2012 asp.net MVC4 c#, Internet Application with KendoUI Implementation.
The easiest way to say it is that My website looks like this
localy on the Development machine:
And like this deployed:
I have checked sever KendoUI forums, all of them pointing to Images missing... I checked and even copied over my deployment files, Files and Images are there, KendoUI Scripts are there.
Any ideas what I could be missing?
This means that for some reason the Kendo JavaScript or CSS files are missing on your deployment server. You can verify this by checking your browser's developer console (the "Network" tab) for any failing HTTP requests (404 status code). In a word make sure the Kendo JS and CSS files are being deployed successfully.
You need to add kendo scripts directly in the header of your layout.
<head>
<script src="~/Scripts/kendo/jquery.min.js"></script>
<script src="~/Scripts/kendo/kendo.web.min.js"></script>
</head>