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.
Related
I am developing a website in a Windows system. I have Firefox and Chrome browsers installed. When I checked the responsiveness of my webpage by setting the device as iPad(768 X 1024) using 'inspect element' feature in these browsers, I could get different resultant UI for same device. Why is it so? On which browser can I rely on as I don't have any Mac/Apple devices with me to test? I am concerned of using other online web tools due to security issues. Please help. Thanks in advance.
There's a tool for checking responsiveness called browserstack. You can try it from here: https://www.browserstack.com. They're offering free trial.
Unfortunately there's no real substitute for device testing. Companies like BrowserStack offer real remote device testing but at a cost. With regard to browsers rendering differently, this has always been a pain. Look at CSS resets.
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.
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.
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.
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.