There's are some major differences between the way iPhone Safari, iPad Safari, and Mac Safari render HTML / CSS. What about the differences between the way Chrome renders content on a phone vs a tablet vs a PC? Do they warrant testing websites on all three versions?
I stumbled to this question, because I had problems that Google Chrome renders the same page different on tablets vs PC.
This was rendering differently:
fonts - there are other threads where people complain about different font rendering, i.e. Chrome renders em based font sizes differently on devices .
In my experience, if you don't declare font sizes, on tablets <p> and <div> will have different font sizes!
clear: both on tablets did put one extra paragraph space (this was used in dropdown menu), which was not seen on a desktop version (I have no idea why this happens).
I haven't seen yet but there are some responsive sites such as http://quirktools.com/screenfly/
or this site may help you
http://www.modern.ie/en-US/virtualization-tools
I haven't test it yet. I think there is a membership obligation for testing.
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.
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.
EDITED: Let me expand the scope of this question to browser capabilities wrt HTML5 and Javascript on destop vs mobile platforms. The original question is below.
What's the difference in the capabilities b/w Chrome for desktop (Mac/Windows/Linux) and that for mobile (Android/iOS). For example, look at a Google Apps spreadsheet on your tablet vs on your desktop and you see that the mobile version seems "limited"? The surface area is limited for phones admittedly but why serve up mobile version for a tablet? What are those limitations (forget extensions when answering this question).
The differences are decided by every website, "what are the diff..." can't be answered in general.
Your browser tells the website User-agent string, which allows the website to decide if it wants to serve a mobile version, that is typically reduced in features. Often there's a link in the footer or so, that lets you switch back to the desktop version.
Also, most today's mobile browsers have a setting like "desktop version". This changes the user agent string to something that makes websites think it's a desktop browser.
I'm designing a mobile website but am having some issues with the compatibility. After testing the website on my Android phone (Rezound) and my brother's iPhone 4, the website looked okay. But when I asked a friend to test it on his Galaxy Nexus, he says he just gets a black screen.
Are there any known website compatibility issues with the Galaxy Nexus? The only thing I know about that phone is that it uses Ice Cream Sandwich, but aren't all Android o/s phones going to render the website in a similar, if not identical fashion?
This is the link to the website in question: http://m.studiosimplicit.com.
I just tested this on a Galaxy Nexus running Android 4.0.2 in the default browser, the latest Opera Mobile and Firefox, and Chrome Beta. All of the aforementioned browsers handled your site fairly well except for the default Android browser, which produced the black screen you described on first load, and the menu elements below a large black square on a subsequent load.
If I had to guess, I'd say that this has something to do with the fixed positioning of your img.bg. Support for fixed positioning was just recently introduced in Mobile Webkit, and its implementation is still a little rough around the edges. Mobile browsers that don't support position: fixed will simply ignore the styling rule and render the element with its inherited positioning while ICS' default browser, which claims to support fixed positioning, will botch the rendering of the element producing the weird behavior we're seeing.
I may be wrong, but I believe the only non-constant thing in the default Android web browser is screen resolution. Although the hardware may be different, the OS it's running and the software the OS is running are the same. It should render identically on the same OS.
The only explanation I can come up with is that Ice Cream Sandwich has flaws in its browser. Though that doesn't seem to make sense either, considering that web page is simple enough. To be honest, I'm as confused as you are right now...
I'm downloading the SDK to test your website in an emulator. Let's see what happens.
Edit: someone else seems to have taken over. I'll just leave it to him/her.
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.