Apparently, those guys at Opera have added a nice feature to their mobile version of the browser: They convert things looking like phone numbers into HTML links on webpages (e.g. USD 15.50, which clearly isn't a phone number).
The feature is described here: http://my.opera.com/operamobile/blog/2010/02/12/opera-mobile-10-beta-3-for-both-symbian-s60-and-windows-mobile
Can that be suppressed in HTML using a proprietary META tag or something like that? It really screws up our application... Do other mobile browsers also have such a feature that I should be aware of?
EDIT: Thanks for providing me with the link to the questions indicating the <meta name="format-detection" content="telephone=no"> tag. That appears to solve the problem on the iPhone, but not on Opera Mobile
A lame solution:
Use Javascript to remove any links with href="tel:...".
After some trial and error this seems to work in Opera Mobile and on Mobilizer:
The HTML text (really should be "Samsung MSC 13800 TEU")
Samsung MSC 13,800 TEU
(put a span tag around the comma with a class of "hide")
The CSS
span.hide {
display:none;
}
The comma is a fudge within "13800 TEU" and probably very annoying for assistive technology users (those with screen readers) but I follow that 80-20 principle (there would be more confused sighted users than those with a vision impairment ;-)
Related
I want to use html5 Push state in my application but i have question does html 5 support iPhones, ipads and other mobile devices? if not then what is the alternative way to do it.
Thanks
It's not a matter of html 5 supporting those devices, but the browsers used by those devices implementing html 5.
The "When Can I Use" website will be handy to you. It will help you understand what features are available now.
http://caniuse.com/#search=push
Also, see this post: Does Internet Explorer support pushState and replaceState?
It will give you some more information on what you can do to implement what you need. One person made mention of history.js. You may want to look into that as an alternative, if the features you seek are not available.
I've been working on a PHP project for University, and as I'm rubbish at PHP I've left the design very simple so I can concentrate on the programming side of things. Now the programming is working I'm working on the design. The site looks fine in Chrome and other webkit browsers but in IE9 it looks awful. The main problems are...
1 - Background image expands the div to the full image size, whereas in webkit is only fills the div size.
2 - Content is not centred, instead it is floated left.
Does anyone know any scripts/hacks I can use to get IE to perform like every other browser? The only thing I'm using at the minute is Modernizr.
You can have a look at the site here if it helps - http://newmedia.leeds.ac.uk/ug10/cs10cwh/pod/index.php.
Modernizr can help, especially if you're using newer things like html5 and css3. Another thing that can help is boilerplate code, I personally like the html5reset.
One particular thing from that is going to help you a lot: if I look at your site in IE it says it goes into Quirks mode, making IE7, 8, and 9 behave... well... quirky :) Place the following meta tag in your head section to improve things for IE:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
You can see what "Browser Mode" and "Document Mode" IE is running in by bringing up the developer toolbar (F12), you can tweak it temporarily for your browsing session to see what happens if document mode is "IE9 standards".
A short update. You may also want to try using w3 validator. One of the errors it gives me for your site:
Line 1, Column 15: Comments seen before doctype. Internet Explorer will
go into the quirks mode.
There are also a few errors on unclosed tags, which can throw off rendering.
What we do is using a seperate .css for the IE versions and in the root we determine the browser and include that .css
So include your normal css for all browsers and for the IE versions include the specific .css file which overwrites the necessary party of the main stylesheet.
Edit: And like Jeroen said, force the IE to render in it's real mode, not some compatible or quirks thing.
Is there an equivalent to -webkit-tap-highlight-color for Windows Phone 7 (Mango)? I'm writing a mobile site, and I'd like it to display the same way across all browsers, if possible.
I've tried tap-highlight-color and -ms-tap-highlight-color, neither worked.
I know this is late to answer, but I have an update.
The answer is still no, unfortunately.
However, IE10 on WP8 allows:
<meta name="msapplication-tap-highlight" content="no"/>
You can only disable the tap color, and it seems that you cannot customize the color.
Unfortunately, there is no such equivalent Microsoft propritary extension at this time for WP7. If you take a look at the Microsoft list of attributes, you will see an absence of anything even touch related.
On the JavaScript side, the IE blog just about that IE 10 will specify the pressure of a touch. This might be the closest that we can get for the time being. For now, if you really wanted to do it with JavaScript you would have to keep track of the time that the mouse was down (what a pain). The events you will need are MouseDown, MouseMove, and MouseUp.
Recommendation: If I were you I would go with progressive enhancement and not support it for WP7 at this time. If it's a critical part of your app though, you may have to play around a bit with JavaScript to see if you can get something workable.
You can disable tap highlight in IE 10 on specific element with CSS
-ms-touch-action: none;
In windows phone 8.1 the meta tag did not worked (PhoneGap App).
<meta name="msapplication-tap-highlight" content="no"/>
But this in the CSS file worked for me
body{
-ms-user-select: none
}
The (-webkit-)tap-highlight property is only supported in Safari on iOS (iPhone/iPad) and other browsers that use webkit.
If you're really desperate to display the tap highlight color you could use CSS' :focus selector which is the closest solution to your problem or try to achieve the same behavior with javascript (jQuery).
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
I'm working on a quick page intended for mobile browsers. While there is little consistency between browsers on cell phones (the target audience), I have a phone number that I would like to be as easy as possible to dial from the users phone. A link seems the obvious choice; so I set up the following:
1-888-123-5467
This seems to work OK on more advanced browsers such as the Android & BlackBerry browsers, it's a lot less reliable on other phones. Any advice on making this link work consistently and or correctly will be greatly appreciated.
FYI, this is a toll free domestic US call, but I imagine that some devices may be looking for a more general format.
The approach you are using is the 'standard' way to do this (i.e follows RFC 3966). If a mobile browser does not interpret it correctly, the only obvious way to fix this would be to extend or modify the browsers behavior itself, which you probably do not want to do or have access to do.
I believe it is supported on Windows devices (mobile explorer), iPhone (safari), Symbian and from what you are saying Blackberry and Android.
Are you finding problems with theses devices or are you supporting other mobile phones also?
Note that others seem to be having the opposite problem with iPhone and iPad as the default browser (Safari) changes anything that looks like a phone number into a link:
http://www.darowski.com/tracesofinspiration/2009/03/31/stop-iphone-from-incorrectly-auto-linking-phone-numbers/
What I eventually came up with was a link that worked like this:
1-888-123-4567
This has worked on every phone tested so far, including Android, BlackBerry and some very clunky older phones. From what I gather, the structure of the link works like so:
WTAI references the Wireless Telephony Application Interface. The wp/ refers to the WTAPublic functions. The mc; is the makeCall function, and then of course you have the phone number. Similarly, you can do a link like this:
Add to addressbook: 1-888-123-4567
This is the same except mc; has been replaced by ap;, which refers to the addPBEntry function. This adds the phone number to your address book or similar stash of phone numbers.
These two sites were helpful in my research:
http://www.oreillynet.com/wireless/2004/02/06/mobile_browsing.html
http://www.informit.com/articles/article.aspx?p=22182&seqNum=4
I've seen big sites like yelp use a different method for accomplishing this, where they use vcard and tel classes:
http://microformats.org/wiki/hcard
<div class="vcard">
<span class="tel">(555) 555-5555</span>
</div>