I am trying to get telephone styling/highlighting working in mobile for current iOS and Android devices. It works fine for telephone numbers, but it also treats other numbers the same (makes them clickable links that open up the phone dialer). These include zip codes and other numbers that should not be treated as phone numbers. I am aware that you can disable this functionality completely using the meta tag below:
<meta name="format-detection" content="telephone=no">
However, I want the functionality, just ONLY on phone numbers.
I also am aware that you can disable this and then add links around all phone numbers using "tel:x-xxx-xxx-xxxx", but that seems really tedious and I was hoping to find a better solution (if there is one).
The telephone number recognition is rather primitive and even erroneous, so it is perhaps best switched off, using the method mentioned. For example, the Android 4 browser does not recognize my phone number in the standard international format (it ignores the country prefix and operator code, when spaces are used).
But if you wish to make use of it and still switch it off for other numeric strings, then the following observation might be useful: The Android browser seems to treat a sequence of seven or more digits (e.g., 1234567) as a phone number, if a single space character intervenes. It does not work that way if there is no space (1234567) or if there is more than one space (1 234 567) or if there is an intervening hyphen (123-4567). A no-break space is not taken as a space, so the following would not be recognized: 123 4567.
I’m afraid this is not consistent across browsers that have such features.
I found that the best solution (for me) is to keep this enabled, by not having the meta tag, and just manually fixing the "mistaken links" that are created. Since I only care about supporting iOS and Android, the current versions at that, it was easiest to go through and fix the few numbers that were being linked as phone numbers. I tried #Jukka's suggestion with but found that it added the undesired space, so I found that (soft hyphen) was the best route to go.
Example:
If you have any kind of account number that is 7+ numbers long, it will be considered a phone number.
1234567 - Appears as a phone number
1234567 - Does not appear as a phone number
Note that these were only tested in current iOS and Android operating systems.
Related
I work on a software generating some HTML to make an UI for our client. As we are making a tablet version of our software, I am in charge of resolving some bugs appearing only on the tablets. That's why I have to prevent some number fields to be considered as phone numbers and therefore to have a link to make a phone call on them. My problem is that I can't use the meta <meta name="format-detection" content="telephone=no"> because of some old legacy code preventing the use of meta (we have to be in quirks mode on IE). Do somebody has an other solution to prevent the tablet to recognise my numbers as phone numbers?
There's a few ways you could accomplish this. One way is to use CSS to enforce a "normal" appearance for the text (wrap it in a div/span, if need be), and use pointer-events:none to prevent tapping it from having any effect in iOS.
I use HTML coding in email marketing.
Nowadays It is important to nice represent email offers both in standard and mobile version.
So, exist the certain tricks which help you to made your emails looks nice on mobile devices (without bugs and gaps).
For example, the most famous trouble is the tearing of content of email letter due to changing of text size by mobile device.
To ban this feature of device I use next css-trick:
#media only screen and (max-width: 480px) {
body {
-webkit-text-size-adjust:none;
}
This trick works fine if I check my email in mobile device browser.
But it is not work if I check it in standart app for viewing emails.
For example here are the screenshots made from Android Tablet PC in standart "E-mail" app (version 4.1):
You can see, that the content is torn because of the incorrect text size.
How to avoid it?
Firstly, using media queries is not 100% supported in all email clients (Gmail for example). Fortunately, this doesn't need to be in a media query.
A webkit specific declaration will only work in webkit based clients (mac for example). See the htmlboilerplate (line 35), you could also add the ms prefix:
-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;
I doubt this will address your Android tablet however. This may be something unavoidable, unless adding !important to your font-size can do the trick.
In farsi letters are attach together to form writing scripts. However when I save HTML pages using "UTF-8" or "Windows-1256" encdoings, and try to display them using webview in android, letters are diplayed seperately and in left-to-right direction (instead of RTL).
I should notice that this case is not happening in phones supporting farsi.
Correct form should be like this (snapshot from phone supporting farsi):
Bad-formed text happens in phones not supporing farsi (Persian):
It should be noticed i've used persian font in both cases.
I also see some solutions for normal Strings in java which changes character on by one in this
question
My question: Can i fix this cases (or it should be fix by phone vendors)? if possible what is solution?
I hit this bug a lot when I was doing keyboards. The problem is that the build in canvas.drawText function in Android didn't support RTL languages. There was a patch for it, but it wasn't part of the default build of Android. So only models going out to those parts of the world that used it tended to have it. Unfortunately I know of no way to test whether it has the patch. And if it doesn't, there's no way to fix it. You could try reversing the text, but then you'd break devices which did have the patch.
Long story short- there is no way to fix it. However, I'd be shocked if Google hasn't picked up the patch in mainline by now (it existed back in the 2.2 days), so its a shrinking number of phones effected.
You can try making html with reverse font sequence! just write a windows app to get font and deliver reverse one, and use it in your android device
I have a link that looks something like:
Call Support
This link works perfectly fine when using an iOS device. When clicking the link while on Android however the phone attempts to dial 1234567890 (the number without the extension). What is the proper way to do this so that it will work across devices
This appears to be a known bug/issue which may be due to the lack of standards around this feature, as comma,'W','P' are all specific implementations which could change as the Manufacturer may switch out the standard dialer for their own.
http://code.google.com/p/android/issues/detail?id=13684
Try commas instead of 'p' for the pauses. I believe Android's pause character is a comma.
While I'm developing responsive website I have used this uni-code ( » ) to the read more links. It is displaying correctly in desktop browser but it is not displaying correctly in mobile devices like android or iPhone. Is it possible to display the same as in desktop..? What's the problem..? Whether the mobile device doesn't support uni-code..?
The problem is in the embedded font you use, via #font face. The version used by Android is apparently broken. It does not display “»”, and it has problems with many other Latin 1 Supplement characters too, see my test page. Something may have gone wrong when you set up the font files on your server.
The problem does not appear if you remove the font-family setting, letting each browser use its default font, or if you use Droid Sans as hosted by Google, using <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'> and font-family: "Droid Sans", sans-serif.
The problem is most probably not in the display of a character (“»”, U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK, is very widely supported in fonts) but in the character encoding. If the encoding is not properly declared, different browsers may make different guesses.
Check out the W3C page Character encodings, and make sure that the declared encoding matches the actual one.
If problems remain, please post a URL and explain what “is not displaying correctly” means (not displaying at all? space shown? some wrong characters shown? which?).
android does not support special characters, in android we need to write > to show ">" character. why don't you use image instead of characters.