Develop Reference

Wrong icon used for Add to Homescreen from Firefox on Android

In my HTML, I followed the guidelines here: https://mathiasbynens.be/notes/touch-icons
Currently, I have only 192x192 size icon for my app. My phone is Samsung Galaxy 4 running Android 5.0.1.
With this, Chrome on Android adds the icon correctly to homescreen but Firefox on Android does not. The latter adds a generic "C within a square" icon. See attachment.
Is this a limitation with Firefox? Is there a way to solve this?

When running RealFaviconGenerator's current favicon compatibility test with Firefox 58 on a Samsung Galaxy S7 running Android 7, I get the 180x180 Apple Touch icon:
What can go wrong with your particular case?
Your icon is slightly larger, 192x192, whereas the highest resolution defined by Apple is 180x180. In the article you mention, the reason for this is Android Chrome. But now Chrome is using the Web App manifest so this trick is probably outdated.
Caching issue. Browsers are well-known for reloading icons only when they want to. Maybe you tried various solutions and now Firefox is stuck with an old setup. Use another phone or try again in a few hours.
Full disclosure: I'm the author of RealFaviconGenerator.

Webview Box-Shadow rendering issue

I have a simple standard webview in my android app and when loading a web site the box-shadows are not showing up. It just shows all elements without box-shadow. However, android chrome browser shows all box-shadows with no issue.
here below i attached two screenshots from my webview and android chrome browser that shows the map box-shadow is perfectly rendered in chrome.
Kind Regards
Ramin

Can you please attach an image so that I can give you a better answer.
As I guess the shadow is not forming due to lower API level. You should at least use Android lollipop as minimum to get the shadow effect.

According to https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow, Android Webview's support of inset is implemented with the vendor prefix: -webkit-
So I guess you need to use -webkit-box-shadow.

Resize or Scroll the screen on Remote Debugging on Android with Chrome

I am trying to use Remote Debugging Android Devices on chrome. But I can not resize my mobile screen fit to 100% or any on Chrome(PC).
On mobile it looks like
But on Chrome (PC) it looks like
Now the problem is : I can not either resize mobile screen on Chrome (PC) nor scroll to bottom (I can only scroll only if I can on mobile)
I tried by zoom in/out but it's not working. But I can see the remaining part by resizing window but I can not see on full size window.
I am using Chrome Version 50.0.2661.102 m on Windows 10 Pro(64bit), Android 5.1 on Moto G (1st Gen)
UPDATE : Now I have updated chrome to Version 51.0.2704.84 m But still same problem

Press ctrl++ several times it will resize automatically, I found this solution by chance:)

Looks like you found a bug. Please file an issue on the Chromium Issue Tracker so the team can triage the problem and address it.

I had the same problem debugging Ionic with Crosswalk, but I was able to resolve the issue by pressing Ctrl and scrolling down.
Unfortunately, this changes the size of the text—but at least you can see all of the mobile screen.

I will try to answer it in best possible way.
When you resize the Chrome in Desktop Screen, try to resize the screen from divider screen between remote device and elements sections. Also use the resize from top of the Chrome as well if needed.
You will find scrolling issue in Google website landing screen (as in your case).
Try another website and check.
Remote debugging requires your version of desktop Chrome to be newer than the version of Chrome for Android on your device. Try using Chrome Canary (Mac/Windows) or the Chrome Dev channel release (Linux) on desktop.
See here for technical issue. Android Remote Debugging Troubleshooting
Below are my observations for two tabs:
I have opened two different tabs in Chrome in my Android device.
Now in left side has active Google opened in tab 1 and in right side inactive StackOverFlow is there in tab 2.
In below screen, left side has inactive Google opened in tab 1 and in right side StackOverFlow is there in tab 2.
After scrolling StackOverFlow screen
Individually screens look like below :
Please let me know if any issue is there. I am using Android 5.1 on Moto E

Website layout all messed up on Android only

My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/

You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

Try removing the fixed background on the body element.

Android Shows Super Long Scrolling Web Page -- This is NOT Correct Behavior

Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!

It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.

It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.