What browsers support the HTML5 device orientation feature? - html

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.

Related

Why safari in mac and safari in iPhone look different?

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.

Website Layout not functioning in Safari

just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.

Should I still support Safari 4.0.4 on iOS 3.2 for my web app?

I just checked my web app in a first-generation iPad with Safari 4.0.4. I
noticed a lot of styles were not working properly:
border-radius
opacity
image height & width (if only one property is declared in the css)
etc...
I am thinking whether to make necessary css adjustments to make my web app render properly on Safari 4.0.4. While the global usage for IE6 and 7 are quite moderate. At the moment we are fine with not showing full support for these browser versions, due to their lack of css support.
Could this same consensus apply for Safari 4.0.4?
IE7's last release was on 2007 (http://en.wikipedia.org/wiki/Internet_Explorer_7). Safari 4 was on 2010 (http://en.wikipedia.org/wiki/Safari_version_history)
If any other frontend developers faced a similar scenario. Would appreciate to hear from you.
I think iOS can be considered sufficiently deprecated at this point to ignore it. The iPhone 4 came with iOS 4 and the iPhone 3GS has had several updates available for it for so long that an incredibly small percentage of users would be expected to still use iOS 3.x. Further, since most mobile platforms push you to update as soon as a new version is released, there is even less of a chance anyone is using anything but the most recent 2 or 3 versions.
You can see a breakdown of iOS version usage here: http://david-smith.org/iosversionstats/
Also, your link goes to information about safari desktop versions. For iOS, go here: http://en.wikipedia.org/wiki/IOS_version_history
As a general rule, our company uses the 2 versions back rule, 3 for IE, unless there is a specific need for further backward compatibility per the client.

My HTML5 webpage is not being read correctly in IE 9

Hello my website http://www.paruhdice.com/index2.html is not acting as it should be. It worked some what fine in IE 8. And works perfectly in the latest CHROME and Firefox... but my sliding navigation is not even responding. What should I do? Prompt users to use CHROME or FIREFOX... or is there a fix to this? Thanks ahead of time
It seems to be working for me in IE 9.0.8112.16421 as well as the latest Firefox release. The left-hand navigation bar moves smoothly with the window as I re-size.
Unfortunately, HTML5 is not a fully implemented standard, so you won't get full support in any browser. IE9 was also released back in march and both Chrome and Firefox have made great strides since then to add more support for HTML5. Doing a quick web search I came up with the site, http://html5test.com/results.html. It certainly gives an interesting overview of your current browsers support for html5 as well as the ranking of other browsers by comparison.
Since it all ready sounds like you are telling all of the old IE, Safari, Firefox users to update to view your site, I see no reason to tell them some features don't work and you recommend they upgrade.

Can I use html5 in my mobile website?

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.