I must create a web site optimised for mobile devices, can I use html5 and css3?
What are the main limitations?
Which devices are compatible? (IOS, Android...)
Regards
Yes - to a degree. The website http://caniuse.com/ details HTML5 availability for the following browsers:
iOS Safari
Opera Mini
Opera Mobile
Android Browser
You can, with some limitations. Basically you'd better use some "pre-cooked" framework like Senche Touch or jQuery Mobile.
Simple answer: the best support for HTML5 in mobile phones is given by iOS and Android browsers.
Yes you can! and about compatibity... it depends on the browser... the new versions of safari that run on the iOs 4++ support html 5...
iOS and Android will both support HTML5 and CSS3 (and well). You'll run into some problems with windows mobile (which runs a modified version of ie7)
Back in April, sources announced that LG would be the first company to launch an HTML5 compatible browser.
Where this was over 6 months ago, I haven't been able to find any other sources that woukd indicate whether any phone browsers would support it.
The best thing to do would to point your mobile device (or emulate one) to a site made with HTML5.
After a little more research I found this quote from the apple.com site.
"Every new Apple mobile device and every new Mac — along with the latest version of Apple’s >Safari web browser — supports web standards including HTML5, CSS3, and JavaScript."
Also for Android, check this page.
Related
I am styling page in css. Using chrome + chrome dev tools for development. But tester has reported different visuals in iPhone and safari(chrome) outcome looks the way i intended it to. Why iPhone safari looks completely different?
Any explanations?
iPhone Safari and Safari(chrome) are two different applciation with different source code. Their release version and CSS, Javascript support differ .
However both try to follow the standard and latest css, javascript coding guidelines and syntax/semantics, but may be not exactly both release the same support at same time.
infact iPad safari and Mac book Safari are different many times.
Chrome on Desktop machine and Chrome on Android devices differ due to same above reasons.
Actually, colleague advised to use
web-kit-appearance: none;
And that worked.
I was wondering if anyone knew of an equivalent technology to iOS' translate, rotate, and scale hardware accelerator properties used in CSS3 webkit transitions that I could find in Windows Phone 7 or even Windows Phone 7.1, Mango.
The company I work for creates websites that operate on a variety of mobile platforms. Currently, we support iPhone and Android devices only, but we're looking to expand our reach to Windows Phones as well.
In the past I used those webkit properties to provide smooth animations for moving around DOM elements in my UI plugins. jQuery's animate function and even pure javascript just wasn't cutting it.
However, after some research I'm found out that the current Windows Phone 7 doesn't support CSS3 or HTML5. So my usual methods won't work here. Fortunately, I've been told that the new 7.5 version should have Internet Explorer 9 on it, which does support some CSS3 and HTML5 technologies. However, I'm wondering if anyone knows if there are any webkit-like translate, rotate, and scale properties I can use in Windows Phone.
Correct, the current Phone (7.0) does not support HTML5 or CSS3. The browser is some sort of IE7 / IE8 hybrid in terms of its functionality.
The good news is that the Windows Phone 7.1 release (mango) will bring with it IE9.0, which is built from much of the same code as the desktop browser. This will brig with it pretty good HTML5 support and hardware accelerated CSS3 transitions, rotations etc ...
You can try out your website right now on the WP7.1 emulator.
Be sure to use the -ms CSS prefix in your CSS. Most of CSS3.0 is still in draft so still requires browser specific prefixes.
Trying to determine if any Android browsers (or other mobile platform browsers) support HTML5 drag and drop.
Is there an up-to-date online reference for HTML5 feature support within browsers? Specifically mobile browsers?
I think this is what you want: http://caniuse.com/
MobileHTML5 http://mobilehtml5.org/ is an interesting reference where to check for html5 support on mobile devices
This shows a lot of mobile related tables,maintaned by #ppk
http://www.quirksmode.org/mobile/
This is specifically for touch events: http://www.quirksmode.org/mobile/tableTouch.html
Which is the browser with minimum hardware requirements with full support to HTML5?
The application should be able to play videos and perform some javascript transformations.
Windows or Linux it doesn't matter (but I bet my two cents on Linux as the winner).
Thanks in advance.
You may be putting the cart before the horse here.
There are a lot of "post pc" devices out there that have very low hardware specifications (iPod/iPad/iPhone, various Android devices, Blackberries, Windows Mobile Devices) that can run lightweight, full featured HTML5 browsers based on projects like WebKit (webkit.org).
Following browsers supports HTML5 for better client rendering especially when having flash, video streaming and mobile version of site. browsers: IE 10, Google chrome, Opera, netscape navigator.
I tried looking at http://slides.html5rocks.com/#slide-orientation and it's not working in Chrome 10 (dev channel), which I thought supported that entire slideshow. I also tried loading the same slide with the Nexus One, which is the phone used for images in the specification, but that didn't work either. Does any device/browser currently support deviceorientation? Would it work on laptops that have the technology?
Also, what is that slide supposed to do when orientation is working?
I am using Chrome 11.0.696.0 on a Macbook Pro, and that device orientation link works exactly how I imagine it should.
it doesn't seem to work in either Safari 5.0.3
or Firefox 3.6
it also doesn't work on my iphone 3gs
None so far, but people in the WebKit community are implementing it. Hopefully in a couple of months it will be available. Usually timeframes for new features are not set in stone.
Does this help at all: http://www.quirksmode.org/m/table.html#t50
There's a technology preview of Opera Mobile that supports device orientation and the replacement, getUserMedia() API.