NetFront 3.5 CSS and JavaScript quirks

Posted 2008-02-25 in Mobile Web by Johann.

NetFront 3.5 on Windows Mobile is giving me some headaches. If you’ve read Linking CSS for handheld devices revisited, you know I’m using JavaScript to prevent the few JavaScript enabled mobile browsers from reading the screen style sheet.

This works well in NetFront 3.1 and 3.3 but not in NetFront 3.5. You can see in this log file snippet that both the screen style sheet and the (large) JavaScript are loaded:

… "GET /blog/…go.html HTTP/1.0" 200 11629 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /favicon.ico HTTP/1.0" 200 4150 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/css/handheld.css HTTP/1.0" 200 939 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/css/screen.css HTTP/1.0" 200 7499 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"
… "GET /resources/js/jb.js HTTP/1.0" 200 27880 "-" "Mozilla/5.0 (PDA; NF35WMPRO/1.0; like Gecko) NetFront/3.5)"

I was testing the code but the JavaScript works fine.

If I change the well-known linking code from

<script type="text/javascript">
if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));
if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));
</script>

<style type="text/css">
@import url("handheld.css") handheld
</style>

<link rel="stylesheet" type="text/css"
    href="screen.css" media="screen,tv,projection,print"/>

<!-- -->

to

<script type="text/javascript">
if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));
if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));
</script>

<style type="text/css">
@import url("/resources/css/handheld.css") handheld
</style>
<link rel="stylesheet" type="text/css"
    href="/resources/css/screen.css" media="screen,tv,projection,print"/>
<script type="text/javascript" src="/resources/js/jb.js"></script>

<!-- -->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/resources/css/ie.css"/>
<![endif]-->

then NetFront 3.5 will at least skip the screen style sheet (but will still load the large JavaScript file).

I don’t want to rely on JavaScript to get the CSS file on the page so NetFront 3.5’s behaviour is not exactly what I’ve expected. Does anyone have more experience with scripting NetFront?

Mobile browser statistics: JavaScript and CSS on the go?

Posted 2007-10-07 in Mobile Web by Johann.

Edit: There is now a newer blog post about mobile web statistics.

I tried to find out which popular mobile browsers support CSS and JavaScript.

Mobile browser list

Here are the top 11 mobile browsers.

Why 11? The last one is too interesting to pass up.

1. Mozilla/4.0 (PSP (PlayStation Portable); 2.00)

1032 requests.
Based on Access NetFront. Does basic CSS and JavaScript. Needs special linking for handheld style sheets.

2. Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; Google Wireless Transcoder;)

852 requests.
These are mobile phones connecting through Google’s Wireless Transcoder. This could be an education issue – apparently people don’t expect “regular” websites to work in their mobile browsers.

3. Opera/9.10 (Nintendo Wii; U; ; 1621; en)

390 requests.
Based on the desktop Opera browser. Great CSS and JavaScript support including AJAX.

4. Opera/8.01 (J2ME/MIDP; Opera Mini; en; U; ssr) UP.Link/6.3.1.13.0

292 requests.
An older Opera mini version. Basic CSS support, no JavaScript. Minor issues.

5. Opera/9.50 (J2ME/MIDP; Opera Mini/4.0.8993/58; U; en)

210 requests.
The latest version of Opera Mini. I haven’t tried it out yet but I doubt it does JavaScript.

6. Opera/8.01 (J2ME/MIDP; Opera Mini/3.1.7203/1710; en; U; ssr)

124 requests.
Yet another Opera Mini.

7. Mozilla/5.0 (Danger hiptop 2.4; U; AvantGo 3.2)

94 requests.
Requests both screen and handheld CSS as well as Java Script.

8. Mozilla/5.0 (Danger hiptop 3.3; U; AvantGo 3.2)

54 requests.
Identical requests to hiptop 2.4.

9. Mozilla/5.0 (PLAYSTATION 3; 1.00)

41 requests.
Also based on Access NetFront. Does basic CSS and Java Script. Linking CSS is also different.

10. Mozilla/5.0 (PDA; NF34PPC/1.0; like Gecko) NetFront/3.4

34 requests.
The latest NetFront version. Better CSS and Java Script support?

11. Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko)

12 requests.
The iPhone’s browser is based on Safari which does CSS and JavaScript (possibly very well).

This list was generated from the last four weeks of log files.

JavaScript

JavaScript for mobile browsers is still experimental. While half of the hits were made by browsers that support Java Script to some extent, relying on it probably can’t be recommended at this time. AJAX is clearly not recommended.

CSS

Support for the handheld media type in the mobile browsers listed here is surprisingly good however. Note I am not talking about what CSS properties are supported, just that linking works.

NetFront is the only browser that doesn’t request the handheld CSS media type and insists on screen.

IEMobile/Pocket Internet Explorer on Pocket PC/Smartphone/other PDAs and the Danger hiptop load all style sheets. The method described in linking CSS for handheld devices revisited should be used for these browsers.

Linking CSS for handheld devices revisited

Posted 2007-06-02 in Mobile Web by Johann.

I described an effective way of linking CSS for desktop browsers and portable devices (mobile phones and PDAs) before.

However, some browsers have to be treated differently.

IEMobile/Pocket Internet Explorer

Microsoft’s mobile browser downloads and applies style sheets for the screen media type which produces interesting results when screen and handheld style sheets are mixed.

IEMobile showing my home page.

NetFront, PlayStation 3 and PlayStation Portable

NetFront is one of the most feature-packed mobile browsers that is embedded in many devices, for example in the Sony Ericsson K610i. Both the PlayStation Portable as well as the PlayStation 3 are also shipped with NetFront.

Unfortunately, it does not load any handheld but only screen style sheets.

NetFront v3.3 showing the HTML and CSS for Mobiles test page.

The solution

The following code will embed a style sheet for the handheld media type (for NetFront/PlayStation) and hide the screen style sheet from IEMobile and NetFront:

<link rel="stylesheet" type="text/css"
    href="handheld.css" media="handheld"/>

<script type="text/javascript">
if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));
if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));
</script>

<style type="text/css">
@import url("handheld.css") handheld
</style>

<link rel="stylesheet" type="text/css"
    href="screen.css" media="screen,tv,projection,print"/>

<!-- -->

The gory details

The first line simply embeds a handheld style sheet. Nothing special here.

<link rel="stylesheet" type="text/css"
    href="handheld.css" media="handheld"/>

A handheld style sheet is written to the page in this test for NetFront or PlayStation:

if (/(NetFront|PlayStation)/i.test(navigator.userAgent))
    document.write(unescape('%3C') +
    'link rel="stylesheet" href="handheld.css"\/' + unescape('%3E'));

The JavaScript then writes a starting comment (<!--) in case the user is using IEMobile or NetFront.

if (/(hiptop|IEMobile|Smartphone|Windows CE|NetFront|PlayStation|Opera Mini)/i
    .test(navigator.userAgent))
    document.write(unescape('%3C%21--'));

From this point on, IEMobile and NetFront will skip the following:

<style type="text/css">
@import url("handheld.css") handheld
</style>

<link rel="stylesheet" type="text/css"
    href="screen.css" media="screen,tv,projection,print"/>

This links the handheld style sheet and the style sheet for desktop browsers. The handheld style sheet is embedded after the JavaScript so that IEMobile/Pocket Internet Explorer will not request the same stylesheet again.

<!-- -->

This empty comment ends the linking. IEMobile will perceive this as the end of the comment.

The result

My home page is now looking great in IEMobile and NetFront. For other mobile browsers, find out how to test handheld style sheets in other browsers.

IEMobile/Pocket Internet Explorer handheld stylesheets

Posted 2007-05-30 in Mobile Web by Johann.

IEMobile (formerly known as Pocket Internet Explorer) has the nasty habit of downloading style sheets for the screen media type.

A very simple solution I came up with is to write a starting comment element to the page in case the user is using IEMobile. I fully explain this trick in Linking CSS for handheld devices revisited.

Pages

Page 1 · Page 2 · Page 3 · Page 4 · Next Page »