How can I specify the icon/ image thumbnail and text used in the iOS Chrome new tab? It doesn't appear to be http://example.com/favicon.ico.
Screenshot of iOS Chrome new tab
Quick and easy solution
Apparently you have only one icon, favicon.ico, which is mostly ignored by mobile browsers. You should at least define a Touch icon. You can use a service such as Real Favicon Generator to create everything and support all browsers.
Full disclosure: I'm the author of this site.
Precise (but probably too elaborate) solution
Run the compatibility test to understand which icon is actually displayed by Chrome in this particular place. For example, if you discover that Chrome takes the 152x152 Apple Touch icon, well, now you know what you need.
Problem: you probably want to support all scenarios (Android Chrome, iOS Safari, etc.), not only the "New tab" of iOS Chrome. So even if you find out, you will probably want to declare other icons.
Related
I've built an mvc app that i've loaded up to azure and on a desktop it looks fine. But the layout is a bit all over the place on a mobile device. Rather than publishing my changes to azure every time I make a design change is there a way I can see how it would look in a browser eg. chrome on a mobile device? One way i'm doing it is just resizing my browser on the laptop to the size of a mobile device and that kind of works but just wondering if there was a better way.
Thanks,
Jerome
You can use F12 option which have toggle device toolbar option in chrome. That would help you see the responsive respective design of your app in all the popular mobile devices chrome gives as an options to test on. plus you can use custom sizing to adjust width and height of the screen to manually check the responsivity.
I have an HTML animation created using Adobe Edge Animate that plays fine in my desktop browser version of Safari (9.0.1)
It doesn't work on the iPad platform it is targeted at, and it transpires that some of the image names in the assets folder are not capitalised. The HTML is calling for 'pasted.svg' for example and the file is called 'Pasted.svg'
OS Safari seems to be using some kind of fuzzy logic to be kind to the developer and is working out which image to use. iOS is not, which doesnt help me bugtest.
Is there a way I can duplicate this behaviour on OS Safari so I dont need to keep loading up to the iPad to test if the animations will work?
Thanks
Background: I'm using the custom pin share URL as you can see in the example below.
Problem: This share URL works on every single operating system and browser except Safari on iOS. It works in all other browsers on iOS, and it works in Safari on all other operating systems.
Example Link: https://pinterest.com/pin/create/button/?url=http://redefiningmom.com/the-real-reason-i-left-corporate-america/&media=http%3A%2F%2Fredefiningmom.com%2Fwp-content%2Fuploads%2F2016%2F01%2Freal-reason-i-left-corporate-america-pinterest.jpg&description=After+ten+years%2C+I+quit+my+job+in+Corporate+America.+Find+out+the+real+reason+I+left+Corporate+America+and+how+you+can+too.
Desired/Usual Behavior: This link would open a share dialogue leading to the creation of a rich pin with a large image, a description, and a link back to the webpage.
Undesired Behavior: Only on Safari on iOS this opens a share dialogue leading to the creation of a non-rich pin with a large image, a description and a link to the image, not the web page.
How do I fix this?
Using an iPhone 5S with iOS 9.2.1 (the latest), the pages look exactly the same on Chrome and Safari:
Is there any way of testing Apple Smart App Banners in a desktop browser by doing something along the line of spoofing the user agent, or is this functionality so specific to Mobile Safari that I can only test it on an iDevice?
I know that merely spoofing the user agent in a desktop browser doesn't do anything in regards to showing the Smart App Banner, but maybe I can do something else in my desktop Safari browser to test the banner?
I am not an iOS developer but I have access to the iOS emulator on my colleague's Mac if that helps.
Unfortunately, the Smart App Banner is only displayed on iOS Safari on a real device. The iOS Simulator and desktop Safari cannot display smart app banners.
This is a bummer, especially because resetting smart app banners after they have been dismissed is a huge pain.
In chrome dev tools, click the sprocket that lead you to the more advnaced settings, there check the 'override' check-box, and select a mobile user agent(IOS, Android).
Keep in mind that the screen sizes that chrome provide are not always accurate and might need some adjustment.
For more accurate screen sizes you might want to use Mozilla & Firebug(basically has the same functionality)
You can just tap the toggle device toolbar inside chrome inspector and the smart app banners are recognized since this toggle changes to a mobile user agent.
See sample result :
I'm using jquery mobile & phonegap to create an app.
jqm version 1.3.1, currently in testing my app with an android device
i'v created a simple popup (code taken from jqm web site)
and the popup shows correctly on my pc (page gets opacity) but on the android device the popup is shown different,
the background page looks like it has a black background, but when i scroll (yes i can scroll when the popup is still opend) some of the background looks ok with an opacity, similar to how it looks on my pc.
Any ideas on what is the reason?
10x
I had the same issue for android sdk 17 (not for older versions which I tested).
Even though this answer might be to late for this questioner, it may help someone else.
My solution:
In your android manifest, switch android:anyDensity="true" to
android:anyDensity="false"
Regards, miweiss