Don't know exactly what's wrong here. But Opera seems to always assume a page width of 640px unless defined differently. Handheld's layout is based on tables. A table with one single column of 100% width is correctly displayed as 100% of screen width. As soon as more than one column is used (as is the case in the header menu) it uses the "virtual" width of 640px. Haven't found any evidence on the web yet. But some JS magic seems to help for me.

Created attachment 2602 [details]
JS to force the page width to the screen width on mobile devices

Successfully tested using Opera 8.65 on Symbian, Opera 7.6 on Zaurus and Nokia's built in browser (Webkit based) on Symbian S60.

Change 15800 - try to fix the body's width in Opera Mobile. Please test with both Opera Mobile and Pocket IE. Thanks!

No joy with Opera.  In fact it may even be slightly wider now - about 3x wider than the screen size.

Pocket IE seems unaffected.

Could you please apply the following change and see what Opera says?

Index: D:/eclipse/trunk/server/HTML/Handheld/pageheader.html
===================================================================
--- D:/eclipse/trunk/server/HTML/Handheld/pageheader.html	(revision 15851)
+++ D:/eclipse/trunk/server/HTML/Handheld/pageheader.html	(working copy)
@@ -14,8 +14,11 @@
 	<script TYPE="text/javascript">
 		function resizeBody() {
 			if (navigator.userAgent.search(/Opera 8/) != -1 
-				&& document.getElementsByTagName("body")[0].offsetWidth > window.outerWidth)
+				&& document.getElementsByTagName("body")[0].offsetWidth > window.outerWidth) {
+				alert("offsetWidth: " + document.getElementsByTagName("body")[0].offsetWidth);
+				alert("outerWidth: " + window.outerWidth);
 				document.getElementsByTagName("body")[0].style.width = window.outerWidth;
+			}
 		}
 	</script>
 </head>

If you don't get the alert message, please remove the condition and try again. If you still don't get it, then I wonder whether it's loading the correct version...

That didn't work, so I added an else block to report the bits you are comparing against:

else
{
alert(navigator.userAgent);
alert(document.getElementsByTagName("body")[0].offsetWidth);
alert(window.outerWidth);
}

It reported:

Mozilla/4.0 (compatible; MISE 6.0; Windows CE; PPC; 240x320) Opera 8.65 [en]
600
575404584 !!!!

So I tried changing to use window.innerWidth, which reports 240 (nb, could maybe extract the screen width from the user agent?).

This works better, in that the skin fits to the screen width, but:
1) there's a vertical scrollbar that uses up space, so 240 isn't be the right value to use if a scrollbar is needed (overlaps the player drop-down control).
2) there is still a horizontal scrollbar, indicating that the page is still 600 pixels wide.

I tried self.resizeTo(240,320), but that didn't work in Opera.

Opera's "Fit to screen" mode works well, except that no images (play, add, move up/down buttons, album artwork, etc) are visible - I see the alt text instead.

I'll probably contact Opera about this as it seems to be buggy here. Opera 7.6 did work without any problem. And then they're already talking about v9...

BTW: what happens if you hardcode
document.getElementsByTagName("body")[0].style.width = 240;
?

I've noticed the scrollbar, too. But as it's only a few pixels on Symbian I didn't worry too much about it. I can even scroll right to get a huge amount of white space...

Could you please give change 16381 another try?

Under Opera, it's now a bit better.

On the Home page and Status page, the width is better, and almost fits the display.

There is still the problem that a horizontal scrollbar overlaps the edge of the display.  If there's no solution, perhaps you could just always remove a few pixels from the calculated width, such that when there is a scrollbar, the whole page width can be seen.

I also still get a horizontal scrollbar at the bottom, even though there's nothing but whitespace to the right of the display.


If I browse to the list of albums (with artwork display turned on), the width is stretched out wide still.

I didn't get any feedback from Opera except for another developer fighting the same issue :-/. The horizontal scrollbar won't disappear, as Opera's still using the 600 (or whatever it assumes) pixels width. I'm only telling it to render the body smaller than it's width. I guess it's the best I can do for now.

I've just noticed that with the albums list page, whilst the page is loading, the width is incorrect.  But eventually the page resizes itself to fit to the screen width (with the same caveats as my previous post about the scrollbars and whitespace off to the right).

There's an annoying issue due to the fact that the page is still rendered wide, in that clicking the drop-down list to select a player causes the screen to scroll over to the right to display the drop-down list fully on the display.

I also forgot to mention that pocket internet explorer seems to be unaffected so far by your changes.

I think I'll just stick to pocket IE for now.

Do you see the same issues with Pocket IE? I thought it was an Opera only problem.

Sorry, that's what I meant - pocket IE is fine.  Your changes have not broken pocket IE.

Ok, I'm closing this as WONTFIX, as it's obviously an Opera bug.

This bug is being closed since it was resolved for a version which is now released!  Please download the new version of SqueezeCenter (formerly SlimServer) at http://www.slimdevices.com/su_downloads.html

If you are still seeing this bug, please re-open it and we will consider it for a future release.