Icon not showing on mobile - android

I'm building a website in WordPress and have bought the following theme: http://my.studiopress.com/themes/sixteen-nine/#demo-full .
This is currently my site
http://jiri.tourdog.nl/
When viewed on a mobile device, one is supposed to see a menu icon that one can click on to reveal a drop-down. When I visit the original theme-demo on my mobile device the icon shows like it's supposed to. However, when I check my own site I can't see the icon (although the part is press-able and shows the drop-down). On my laptop I can resize my screen and it'll also show.
So this leads me to believe this is not a WordPress issue nor is it an issue inside the theme (the css is exactly the same as the demo).
What could it be?
Summary: Icon doesn't show on my mobile device, does show on desktop, and am also able to see the original theme demo's icon on my mobile device.

Related

Push Notification in TWA shows an indicator in Chrome Icon instead app icon

I am building a Trusted Web Activity based on a Progressive Web App. Mostly everything works just fine, but the moment a web push notification is received by the device, in the android launcher the chrome app gets an indicator (small dot on the icon) instead of the actual TWA. I am using a virtual device from Android Studio (Android API 30) for testing this. I expected the indicator on the app icon instead of the Chrome icon. After clicking on the indicator the dot on the chrome icon disappears.
Screenshot of Android with indicator on Chrome icon
The first try was that I built it based on the svgomg-twa example and now I tried to create the TWA with bubblewrap explained here. Both options result in the same behavior like explained before.
I am happy to provide further details, but I am missing the starting point what could be responsable for this indicator behavior. So please just let me know if you need some more information.
I would be very happy if you could give me a starting point to figure this out.
Thanks in advance,
Matthias

How to implement the same Launcher icon on all Android Devices?

Recently, I am implementing the adaptive launcher icon in my android application. I have successfully implemented it.
I ran my application on some Gionee mobile( mostly i run my application on Stock Android) running on customized Android 6.0 like mi or Huawei. I found out that there is some kind of ugly mask the manufacturer has embedded in the customized Android which makes the App Icons ugly.
So, I downloaded other apps and found out that other apps also have this ugly mask but apps like Google Tez, Google PlayStore, and many other Google apps are somehow defying this ugly mask thing making their icons like the original. How are they doing it?
I thought by putting their launcher icons into mine could put an end to my misery and I will somehow get the insight of making the launcher icon more compatible.
Here is the result of putting Tez icon in my resource file.
As you can see there is that ugly mask in my icon on the left of google chrome and the right one is the original Tez app icon. How are they doing it?

Modify Progressive Web App background colour

I have a Progressive Web App which is capable of being added to home screen. When the home screen icon is tapped (on mobile) there is a (kind of) welcome page with icon that appears before opening the actual app.
I have set the background colour of that welcome screen to be blue in menifest.json. I need to make it brown. I have modified the menifest.json file and updated the website. But the mobile seems to have cached it permanently and it is still showing blue.
I have refreshed page many times and added the web app to home screen multiple times. But it is never changing.
I have also changed the cache name in service-worker.js. Yet no luck!
Plug in your device
visit chrome://inspect
Inspect the device / tab you are looking at for your site
In DevTools go to Network tab
Select 'Disable Cache'
Refresh your web app
Then try adding to homescreen
If you get the correct color it's a good indicator that your previous manifest was cached and you should consider a caching strategy, either file re-visioning the manifest.json file (i.e. manifest.12345.json) OR set appropriate headers.
One thing to note: on Android there is no way to update the icon / manifest details once it's added to homescreen - this is a known issue / bug.

Images not displaying on website? But do on handheld device

NOTE:
Please see: http://elitehitsquad.co.uk/carbon.png
This is where it will show the carbon for a split second then disappear resulting in black! Hopefully the screenshot on the left doesn't show the carbon for you guys!
I had to take a screenshot very quickly for the carbon to show, so the second screenshot has some transparency.
I have also labelled which is black and which is carbon from my screen (incase the carbon shows for you guys)
I'm building a website and it's been going fine, had no problems whatsoever, however, randomly after refreshing the page, the background images (which are carbon patterns) are no longer displayed?
The images do display however, on my tablet device and iPhone 5.. which is weird.
I took a screenshot of the website on my phone and emailed it to myself, and even windows doesn't pick up the background when viewed with Microsoft's picture viewer, the carbon displays for about 0.5 seconds, then disappears resulting in a black background..
I have tried loading old code from a backup, still nothing. Chrome, Firefox and IE all do this, and yes, i've also cleared temporary files / temporary internet files and the cache/cookies/site data.
Since im not fussed if you see this part of the site, go ahead to: http://elitehitsquad.co.uk/wp/ and take a look, their is a carbon background for body, a carbon background (slightly different) for the nav bar, and the content is in a black box.. Yet on my computer screen it's just all showing black? But on my handheld devices, it's showing normally...
Anybody know of any reason?
By the way, im using a Lenovo Ideapad Z585 with AMD A10 -4600M APU with AMD Radeon HD 7660G + 7600M Dual Graphics.
Also should note if I change the background to a any solid coloured image, it works fine...
Thanks,
Blake.
This is most probably incomplete monitor calibration issue.
Check your Windows display settings, called Color management (if you are on this platform) inside your Control Panel\All Control Panel Items\Display\Screen Resolution\Advanced settings.
There is an color management wizard who will lead you trough the process of calibrating your monitor.

Android HTML5 add shortcut icon to home screen not consistant

We have HTML5 mobile website, when we try to add the site to the 'Home screen' by add to home screen icon. It doesn't work consistently. It shows the app icon sometime, sometime it shows default star icon.
Why android browser behaves like this? Is there any way to make this behaviour consistent.
We already tried,
http://www.mollerus.net/tom/blog/2010/06/web_app_homescreen_icons_in_android.html
Android | bookmark icons on homescreen
Configuring Android Web Applications
No success :(
https://realfavicongenerator.net/ does a good job at generating icons for all types of browsers.

Categories

Resources