I am following this guide for Specifying a Webpage Icon for Web Clip
(https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)
However, I wasn't able to find how to change the default Name or Title displayed below on the icon on the phone. Anyone know how to change or set a default icon name?
Figured it out
<meta name="apple-mobile-web-app-title" content="Enter Your Name Or Title Here">
put this line in between your head tags in the index.html or your top level html.
Related
The location of the favicon is clicking the share button at right top hand corner in iOS's Chrome. The icon is in the share drawer which I circle it out in the picture below.
When I make it as a dynamic icon base on the url, I leave the href empty at the beginning in index.html and add the path of the icon to the href in js or a script to the href. <link rel="shortcut icon" href="" /> As a result, it doesn't work to make it dynamic. What I guess is seem like chrome only set the icon at the beginning. Because I leave it empty in index.html, there is no icon. The change I add later doesn't have any effect on the icon.
But if I hard code the path in index.html, e.g <link rel="shortcut icon" href="/favicon.ico" />. The icon shows up. However, if I want to change href path to something else by script, it doesn't have any effect as well.
Is there any way that can make this icon dynamic? Thank you.
I have an SVG of the US states, and need anchor links to scroll to the state info on the page below. The anchors work fine on desktop and android, but not on IOS. The state changes to to hover color when clicked and does not link, and the hover color remains.
I found some suggestions to use xlink:href, but that is depreciated. I did try it to see if it worked and it did not. I have also tried some suggestions providing jquery code, but it did not work and also stopped the links from working on desktop.
The SVG is set up with hrefs wrapping each path like this:
<svg viewbox="0 0 959 593"> <a href="#ak"> <path id="AK" ...">
<title>Alaska</title></path></a>
(I've removed the long string of code for the path)
Here is the link to the page with the map. The anchor links work on desktop and android and not IOS:
https://www.automatictrap.com/pages/trappable-species
I have never posted here before, so I apologize if this is not enough info.
This has been resolved. Some of the anchor links on iPhone only seem to work when "a id" is used, and the links from the SVG only work when "a name" is used.
My problem
I have embedded a Memberpress form inside my Wordpress page (designed with Elementor), but when trying to fill out the form on iOS devices, the text inside the field is not centered. I can only see the top of the text.
The problem doesn't seem to appear on other operating systems, and it doesn't happen on desktops.
Have a look at a screenshot here: https://imgur.com/a/8fzBUFe
What I have tried to do
I have tried to embed some custom CSS with no effect. I might not be getting the syntax right as I am fairly new to this - and to the "Custom CSS" function of Elementor.
{-webkit-user-select:text;}
And also:
<meta name="viewport":
content="height=device-height;
width=device-width initial scale=1.0, maximum-scale=1.0,
user-scalable=no, target-densityDpi=device-dpi"}>
I have a review box on my website that has 10 or more reviews. Since it's all text it's getting crawled and indexed. I'd rather it didn't get crawled and I've placed the google:off and google:on idea that I discovered. However that may only work for a googlebot crawl, if at all. I was thinking if the review box could link to the text in an external htm page, like you can to a css page, then that might prevent it from being crawled and still load into the space accordingly. I don't know, is this possible?? Thanks for any response.
I have found an excellent solution on my own, and would like to share it...
I created an iframe for my review box and styled it for width, height, and border in my css. Within the iframe tag I put src="reviewstext.htm". I then created this htm page and copied and pasted all my reviews. Within the head tag of the page I put...
meta name="robots" content="noindex,nofollow"
link rel="stylesheet" href="styles.css" type="text/css"
Also, for some reason the iframe tag takes on the same background color as the body of your site. In my case it was a blue colour. I wanted my iframe to have a white background instead. The css styling didn't seem to work but styling the body tag in my reviewstext.htm file did the trick... like below.
body style="background-color: transparent;"
So, I now have a reviews box that refers to an external page. Not only does the text on that external page not get crawled, but the text is not on my homepage either for crawlers to see. With this change my keyword ratios are back in line and not obscured by all the review text... :o)
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.