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.
Related
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.
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.
I am testing our web app for various mobile devices. In this case, I’m running a Blackberry simulator that simulates a Blackberry Bold 9900 running Blackberry OS 7. There is nothing out of the ordinary in my pages. The first page is not particularly special, it is Html, jquery, and jquerymobile. However, the Blackberry simulator's browser shows my page like a 1970s color TV that needs its rabbit ears adjusted.
I don't have access to a real blackberry at the moment, but I've been told that our pages don't show this distortion on real hardware.
Are there any workarounds to get the simulator to better reflect that real hardware?
Is there something in my Html that is messing up the presentation on the simulator? If I don't use jquerymobile, it looks fine (for whatever that is worth).
I tried the same experiment with the jquerymobile demo site.
http://jquerymobile.com/demos/1.3.0/docs/intro/ - shows the same colorful mess as my app. See captured image below. http://forum.jquery.com/topic/jquery-mobile-demo-page-causes-blackberry-7-1-simulator-browser-to-crash has an interesting comment from a Blackberry employee:
The page does load, but not without some very major rendering
artifacts (there appears to be a colourful static/noise overlay on top
of the content.)
The simulator came from the Blackberry site.
--- Update
Blackberry device simulators can be downloaded from http://us.blackberry.com/sites/developers/resources/simulators.html
You can download simulators for a specific device and OS version. It seems that some of the simulators are buggy and don’t support jQueryMobile. However, I’ve found that the Blackberry 9790 for Blackberry OS 7 works well so far. This is 7.0.0.592 (9790).
I tracked this problem down to CSS, and more specifically the following tags:
-webkit-perspective:
-webkit-transform:
when commenting these out everything was fine.
Update: It seems like upgrading the graphics driver may solve this problem (it didn't work for me):
http://supportforums.blackberry.com/t5/Testing-and-Deployment/Blackberry-7-emulators-bug/td-p/1409051
This seems to be an error with the program itself, not your HTML. If your code works fine on the real thing but not on the simulator, then it's probably the simulator.
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.