Really annoying Internet Exploder/iPhone/Xalan2 interlocking bugsproblem

[Simon Brooke]

The designers of the iPhone browser, for reasons of their own, chose not
to honour the 'media="handheld"' attribute of style sheet links (and the
designers of the Android browser have slavishly followed the iPhone in
this, to my mind, poor decision). Consequently you have to use obscure
and nasty hacks with media queries in order to get iPhone and Android to
select the right style sheet:

<link rel="stylesheet" href="/scenehere/styles/handheld.css"
type="text/css">
<xsl:attribute name="media">
<xsl:value-of
select="normalize-space( concat('only screen and (max-device-width:
', $switch-width - 1, 'px)'))" />
</xsl:attribute>
</link>
<!-- tell iPhone not to shrink mobile website -->
<meta name="viewport"
content="width=320; initial-scale=1.0; maximum-scale=1.0;
user-scalable=0;" />

Unfortunately, all versions of Internet Explorer up to and including the
latest beta of Internet Explorer 9 throw a paddy when they see the media
query and refuse to load any style sheet at all.

There's a workaround, documented here:
http://www.iphonemicrosites.com/tutorials/using-media-query-to-declare-
css-for-iphone/

which is that you surround the bits that Internet Explorer can't parse
with proprietary markup:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-
width: 480px)" href="iPhone.css">
<!--<![endif]-->

I've tried three different methods of generating this markup with XSL.
Putting it in a <![CDATA[ ]]> fails because it ends up generating
&lt;,&gt; instead of <,>. Enclosing it in <xsl:comment></xsl:comment>
fails because in the proprietary markup the *lack* of whitespace after
the double hyphen is significant! Marking it all up using character
entities in place of angle brackets works perfectly with xsltproc
1.1.24-2; however, what I'm using on my production system is Xalan (Java)
2.7.1-2, and it stops processing when it encounters this markup.

I'm not actually sure whether the behaviour of xsltproc or the behaviour
of Xalan is correct. The proprietary markup required by Internet Explorer
is (probably deliberately) not well formed, so it isn't surprising that
it's very difficult to generate.

Does anyone have a solution, or suggestions of some further avenues I
might explore?

 

[Simon Brooke]

On Sat, 25 Sep 2010 08:58:55 +0000, Simon Brooke wrote:

Following up to myself, bad form, I know.

Brief summary of the problem: iPhone needs media queries in order to
select the right style sheet; Internet Exploder can't parse the media
query, and barfs; there is proprietary markup which allows Internet
Exploder to ignore the stuff it can't parse, but that's very difficult to
generate with XSL.

I now have a partial solution. It's not a complete solution, so I'm still
looking for other people's ideas. My solution is this:

<xsl:comment>[if IE]&gt;</xsl:comment>
<link href="/scenehere/styles/default.css" rel="stylesheet"
type="text/css" media="screen"/>
<xsl:comment>&lt;![endif]</xsl:comment>
<xsl:comment>[if !IE]&gt;</xsl:comment>
<link href="/scenehere/styles/default.css" rel="stylesheet"
type="text/css">
<xsl:attribute name="media">
<xsl:value-of
select="normalize-space( concat('screen and (min-device-width:
', $switch-width, 'px)'))" />
</xsl:attribute>
</link>
<link rel="stylesheet" href="/scenehere/styles/handheld.css"
type="text/css">
<xsl:attribute name="media">
<xsl:value-of
select="normalize-space( concat('only screen and (max-device-
width: ', $switch-width - 1, 'px)'))" />
</xsl:attribute>
</link>
<xsl:comment>&lt;![endif]</xsl:comment>

which generates this:

<!--[if IE]>-->
<link type="text/css" rel="stylesheet" media="screen"
href="/scenehere/styles/default.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet"
href="/scenehere/styles/default.css"
media="screen and (min-device-width: 481px)">
<link type="text/css" rel="stylesheet"
href="/scenehere/styles/handheld.css"
media="only screen and (max-device-width: 480px)">
<!--<![endif]-->

This renders without problem on Chrome, Epiphany, Firefox, and Opera
browsers on Linux; on Chrome, Firefox, Opera and Safari on Windows and on
the native Android browser and Opera Mini on Android. It's not yet tested
on iPhone. On Internet Explorer 9 on Windows, it renders but with a stray
'-->' appearing in the rendered display.

Konqueror 3.5.9 on Linux selects the right style sheet using this
solution, but fails to fully render my pages for other reasons.

 

[Simon Brooke]

Just so you know, if you don't give iPhone users a way to view the
regular page instead of your 'mobile optimized page' you will piss off a
lot of users.

There is absolutely no way at all that the users could use the 'regular
page'. On an iPhone screen the selection resolution required would mean
you'd need to select with the tip of a fine stylus, a fingertip simply
isn't going to work.

Don't believe me? Here it is:
http://sh.scenehere.info/scenehere/showmap
(note: this version currently does NOT work with Internet Explorer)

 

[Martin Honnen]

<!--[if IE]>-->
<link type="text/css" rel="stylesheet" media="screen"
href="/scenehere/styles/default.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet"
href="/scenehere/styles/default.css"
media="screen and (min-device-width: 481px)">
<link type="text/css" rel="stylesheet"
href="/scenehere/styles/handheld.css"
media="only screen and (max-device-width: 480px)">
<!--<![endif]-->

This renders without problem on Chrome, Epiphany, Firefox, and Opera
browsers on Linux; on Chrome, Firefox, Opera and Safari on Windows and on
the native Android browser and Opera Mini on Android. It's not yet tested
on iPhone. On Internet Explorer 9 on Windows, it renders but with a stray
'-->' appearing in the rendered display.

I think I saw a demo recently suggesting that IE 9 supports CSS media
queries
(http://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx also
says that although that is for CSS rules and not for the link media
attribute) so you might want to test and change the conditional comment
to say
if lt IE 9

 

[Simon Brooke]

It works fine on my iPhone 4. I can zoom in an out of the map easily,
and enter criteria in the filter as well - all without having to
pinch/zoom.

It's slow as hell to load, but that's the case even on a dual quad-core
Xeon Mac Pro desktop computer - LOL!

Maybe you should actually try an iPhone out sometime before making such
assumptions. ; )

And can you accurately select one flag from among a group of flags? If
you can't, the whole app doesn't work.

Yes, I know it's slow. It's running on an old pentium box in my study at
home, so you're browsing it over the wrong end of an ADSL line.

What I am impressed by this afternoon is how well Opera Mini supports
such a complicated user interface. You (obviously) can't scroll the map,
which is a big limitation, but everything else works.

 

[Guest]

And can you accurately select one flag from among a group of flags? If
you can't, the whole app doesn't work.

yes, just zoom in and tap. very simple.

 

[Michelle Steiner]

Maybe you should actually try an iPhone out sometime before making
such assumptions. ; )

And can you accurately select one flag from among a group of flags? If
you can't, the whole app doesn't work.[/QUOTE]

Yes,you can accurately select one flag. And it scrolls just fine.