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.
Related
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.
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
Android seems be to be increasing the clickable area of a submit button on an HTML form I'm working on. It's as if there's about 25 pixels to the right of the submit button that are also tap-able. This is problematic because, in my design, to the right of the submit button is an <A> element with an event handler bound to it. Tapping the <A> often submits the form instead of firing the event handler. I'm doing most of my testing in Browerstack and some on real hardware. The problem exhibits in (virtual) devices with lower screen widths (e.g. 320px), and seems to be there in Android 2.3 and 4. The same pages in iPhone (4s, iOS6) and Blackberry (v7) don't exhibit the problem.
Here's a CodePen example, and a single file version of the same code for easier viewing on mobile
Has anyone else seen this? Is it a feature? A bug - either in Android or in my code?
have you tried applying a reset.css to it? It seems to be an android webkit issue.
Also, try to use 40px areas for tap buttons.
I recommend using the reset.css stylesheet provided by meyerweb.com. It removes (almost) all styling that browsers would apply, but you may find you need to rework a lot of css and put a lot of stuff in such as <h1> tags.
CSS Tools: Reset CSS
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.