We Keep Coding

Why is Safari on IPhone XS Max applying phone linking to values inside data attributes?

We have a html/javascript widget that our clients can add to their sites webpages by adding a tag in the head of the page, and adding an element in the body the page.
<a href="#" class="ourwidgetclass" data-product-id="1234567890" />
When the page loads, our javascript finds all the elements on that page with that class, grabs the productId from that data attribute, does a webservice call to our API and renders a little product visualisation for the supplied product Id.
Yesterday we received a bug report that this html is rendering as follows
1234567890" />
This is:
localised to safari on iOS
only occuring on the IPhone XS Max - it's not occuring on any other iphone device
I've looked around on SO and the usual recommendation of adding the following meta tag isn't an option for us as we can (or shouldn't) modify the meta tags on the site of teh client that's rendering our widget. ( <meta name="format-detection" content="telephone=no"> )
So aside from writing some horrid javascript/regex to try and identifiy when safari cocks up our data like this... has anyone got any ideas why this might be happening in such a localized fashion.

How detect smartphone screen and show webpage

I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks

Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.

Force hide address bar in Chrome on Android

I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.

Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">

window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers

Alert does not trigger, JS is not detected

I think I might be going crazy at this point. I had an ASP page working yesterday, and came in today to Firebug telling me it cannot detect the JavaScript on the page. Love it when things change after not touching them.
So I start trying to figure out what is happening. I tried slimming down the code, this answer, restarting Firefox, saving the page under a new name and loading the new one, and adding a ridiculous amount of code I generally consider unnecessary. I even tried removing everything from the page and changing it to this:
<script>
alert("yay");
</script>
Does not trigger alert, and Firebug says "No JavaScript on this page". I've been looking for explanations for almost 2 hours and cannot figure out what is happening. I know I did not deactivate anything because other pages will show JavaScript and function properly. I also know that no add-ons are causing it.
I am using Firefox 28.0 (also tried on 27.0.1). Opening the page in Chrome triggers the alert.

(Damn I meant to post this as a comment).
As you responded I'll re-popualate...
I create jsfiddle,
<body>
<script>
alert("yay");
</script>
</body>
Also ensure your browser has javascript enabled.

You should follow the instructions on the Firebug's first aid page.
I assume it's either some Firebug setting or a conflict with another extension. (I see at least YSlow and FlashFirebug installed.)
To check that you can create a new profile and just install Firebug.

Closing the tab and opening the same link in a new tab seemed to resolve the issue.
I'm not sure if any of the prior attempts factored in, so I will list them as well. To be clear, none of these worked, but may have paved the way in some fashion.
Restarting Firefox
"Clear Activation List" on Firebug
Save page under new filename and load the new page
Uninstalling add-ons (all of them)
Create new profile and load page on that profile
Add a <!DOCTYPE html> to the top
Add type="text/javascript" to script tags
Add charset="utf-8" to script tags
Add <meta charset="utf-8"> in <head>

Adding favicon to javascript Bookmarklet (uses window.open)

I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a favicon to show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.
My understanding of the problem:
Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon. I'm not ready to give up yet though, I feel that there's some injection that can be made...
As of now, the bookmarklet launch code looks like this:
Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)
javascript:void(window.open(
'http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
't='+encodeURIComponent(document.title),
'test','status=0,toolbar=0,location=0,menubar=0,
resizable=false,scrollbars=false,height=379,width=379'
));
The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:
Working favicon, no bookmarklet window
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head>
<body>Hello World</body>
</html>';
I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.
My hybrid of the two -- bookmarklet but no favicon
javascript:'<!DOCTYPE html>
<html><head>
<title>Hello World</title>
<link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
</head><body>Hello World</body></html>';
window.open('http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
'&t='+encodeURIComponent(document.title),
'test',
'status=0,toolbar=0,location=0,menubar=0,resizable=false,
scrollbars=false,height=379,width=379').void(0);
What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.
Logical Solution:
My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head>. However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?
There exists a similar question but I did not seem to find the answer I'm looking for:
How to have favicon / icon set when bookmarklet dragged to toolbar?
Source for the working javascript favicon (no bookmarklet however):
http://www.tapper-ware.net/blog/?p=97
I'd be interested in what your current knowledge/thoughts on this would be

I tried and retried, and my first conclusion was: "It can't be done (at least not in FF4 on Ubuntu 11.04)". You need (I guess) a simple solution for your site visitors (drag&drop, add bookmark with 1 click ...).
I have found a workaround, it does it's job, but it is a little buggy (maybe someone can help fix it).
PROS:
add a icon to the bookmarklet
it uses windows.open
doesn't leave empty pages behind
CONS:
it reloads the current page (instead of leave a page behind)
Can't make Firefox POP-ul blocker allow "javascript:" generated HTML page to load POP-ups, so you need to hit allow every time
This is the code:
Bookmarklet
This is a link that you put on your page, the user needs to drag&drop this link to the bookmark bar (you can use something like Add Bookmark Script for adding it as a bookmark with 1 click), The bookmark has no icon until the user click's it at least once.
So how it supose to work:
1. redirect the user to the generated HTML page from the bookmarklet (that makes the ICON posible)
2. onLoad open the window you need using "windows.open"
3. redirect the page back using "history.back(-1)"
In theory everithing happens so fast, that the user does't see the new page, just that the current page is reloading, and a new windows appear.
The problem:
1. I use setTimeout for history.back beacause window.open is blocked by Firefox, so I need to click allow every single time (if somebody can fix this ... we have a chance of using this, develop it further :) )
I know THIS is not a reliable solution, but this is the only solution I've got so far.
Hope this helps a little. :)

Some of the things that I've tried that might possibly get you going a bit more:
Append a new link element to the current document:
javascript: var newLink = document.createElement('link');
newLink.setAttribute('rel','icon');
newLink.setAttribute('type','image/png');
newLink.setAttribute('href','http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png');
document.querySelector('head').appendChild(newLink);
void(0);
Note that I was using the querySelector due to IE testing (though works in modern browsers as well). With Chrome and FF, I kept getting invalid character when trying to create the element, so I had to do piecewise attribute setting.
Tried using base64 encoded image string using the "data:image/png;base64,iVBORw0KGgoAAAA..." URI schema, but that didn't help anything due to the fact that I still had to set it to the current HTML text (which I could do, but ran into the same problem as you above of no bookmarklet).
Maybe this can't be done due to cross site scripting concerns? Not sure... Either way, really curious to see what you come up with (if you manage to come up with anything).

"I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?"
If what you after really is the visual effect, you can try launch the blank HTML in hidden iframe, then launch the javascript.
Hope that helps