24 replies [Last post]
jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

Early handhelds were not good on CSS, mfgrs not respecting media=handheld, passing screen size in none standard HTTP headers, spoofing the user agent string.

Are the more recent handhelds any better?

Specifically, when a handheld browser hits my web site for the very first page (before I get a chance to sniff anything) what do I have available to help me deliver the right stuff.

If I know going in the door that it's narrow, I can convert the left nav into a horizontal footer and turn off a lot of the images using CSS - but that begs the other question. I really need to know device width AND whether CSS is respected.

Just doin' my best at www.jinotega.com
Tony Robins

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS support on handhelds is

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 46 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

FYI - My PDA renders all my

FYI - My PDA renders all my CSS designs correctly, and it uses the handheld media type. If you post your URL, I can hit it with my PDA later today.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

But what is the PDA running?

But what is the PDA running? it's a case that preparing pages for handhelds is still a bit of a nightmare, unless one is dealing with Opera Mini where one doesn't need to care much as it seems to render anything called via it's server with pretty good accuracy.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 5 days ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I believe Safari is also

I believe Safari is also pretty good. Isn't there now a Gecko version for mobiles?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Safari on iPhone doesn't

Safari on iPhone doesn't recognise the handheld media type so you have to use this sort of thing instead:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 3 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

I've been playing with

I've been playing with websites made using the handheld media type, and things come out pretty well. Important things I think to note are:
- Javascript support is often off, or rudimentry
- Try to have a highcontrast background, Black text on white if needed (because screens are smaller, and often in sunlight
- Critical information should be no more than one click from the main page ( its harder to navigate on a phone)
- you can pretty much forget about WAP websites now, they are practicly dead before they took off
- I'm not sure how EM is rendered for font sizes

Things i've tried and use:
Nokia N93 - (outputting websites to the tv screen is a nice bonus)
Nokia N76 (faster browser, practical)
Nokia N80
iTouch (very fun to browse with!)
Nintendo Wii (doesn't use handheld media type, more of a normal browser)
Nokia 3220 (Too slow, screen to small to bother much with)

From those, I can gather that although a common resolution is 320 x 240 (or its landscape version) now, you shouldn't design to fit things horizontally, just that its easy to scroll down with.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

Wow, this water is murky

So WAP, WURFL, WAG, UAProf, and CC/PP are all out there and some 600+ small device manufacturers are just grabbing the nearest standard. Then iPhone basically tells me (page developer) that they (device maker) know best how to bend my page onto their device and use media=screen. But *I* wrote my page so Mr. Jobs just tell me what your iToy can handle and I'll do my bit for your customers. (Other web developers can trust Apple, if they want)

At least Opera says we know best BUT if you give us a media=handheld, it's all yours baby!

I was rather hoping for some convergence, direction. Dare I say Standards? Thought not Wink

I liked the media="only screen and (device-width:480px)" approach. Couple dozen of those working through, effectively, a nested IF statement might help a few cell phone users here and there. Big advantages: no JavaScript dependency and no server code. Disadvantage is that the entire page downloads then the handheld CSS rules discards what it doesn't want.

  1. big = everything
  2. medium big = drop the graphic header, use text header instead
  3. medium = drop right hand somewhat optional column, expand content to fill
  4. medium small = convert left nav to bottom text nav, change heights of h1-6 tags, kill images, kill margins and padding.
  5. small = buy a cheap phone and just play with my web page until I'm happy at 96x40.

...and then there are the Firefox/IE users who have 50 inch displays and the others who run the browser at reduced width 'cause they need the real estate. The people who grab the borders then move the mouse in circles don't figure much in my scheme Sad

Holding my breath waiting for WURFL. Perhaps thats the holy grail ...

I feel like Don Quixote, now where's my cape and horse, I see a CSS windmill.

Just doin' my best at www.jinotega.com
Tony Robins

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 46 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Hugo wrote:But what is the

Hugo wrote:
But what is the PDA running?

It runs palmOne Blazer v4.0. The device is a Palm Tungsten E2.

You might be interested to check out Cameron Moll's interview on Paul Boag's podcast. He talks about a design and testing strategy for mobile devices. You can listen to the podcast, or scroll down for a pretty good transcript.

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:At least Opera says we

Quote:
At least Opera says we know best BUT if you give us a media=handheld, it's all yours baby!

And to my mind I'd quite like Opera to be the standard that is followed as they seem to have done the best and most thoughtful work in this area.

We appear now to be in the position where handheld devices are starting to come of age rapidly and simply cannot be ignored and must be catered for yet as usual 'Standards' are yet to really be firmed up leaving us with more work than would be desired.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

phone test site

Need help from Phone, iPhone, PDA, Palm and Blackberry owners.

Please go visit
http://jinotega.com/sv.asp
and let me know what you get.

It looks at the HTTP headers, discards all the well-known stuff and reports what remains. From the HTTP_ACCEPT, it tries to figure whether images (jpegs), script and CSS are OK. if the HTTP_ACCEPT contains "vnd.wap", that seems to be a reasonable indicator of a handheld.

Then it tries to use CSS on your handheld to determine approximate device width. For the curious, heres the classic ASP code. Suggestions and comments welcome.

Handheld analyzer

/* The CSS executes down on the browser so, for bandwidth, its to durned late! */
/* sadly the information is not sent up to the server; needs other techniques */
#csstest {display:none;}

@media all and (min-width: 1025px) {
/* super wide screen */
#sizesuper{font-weight:bold;color:red;}
#sizeregular,#sizepda,#sizenice,#sizemicro {display:none;}
/* unfortunately, wide and regular screens do not announce themselves */
/* except in Opera */
}
@media all and (min-width: 701px) and (max-width: 1024px) {
/* regular screen user */
#sizeregular{font-weight:bold;color:red;}
#sizesuper,#sizepda,#sizenice,#sizemicro {display:none;}
/* unfortunately, wide and regular screens do not announce themselves */
/* except in Opera */
}
@media all and (min-width: 481px) and (max-width: 700px) {
/* blackberry or PDA */
#sizepda {font-weight:bold;color:red;}
#sizesuper,#sizeregular,#sizenice,#sizemicro {display:none;}
}
@media all and (min-width: 320px) and (max-width: 480px) {
/* iPhone or nice phone */
#sizenice {font-weight:bold;color:red;}
#sizesuper,#sizeregular,#sizepda,#sizemicro {display:none;}
}
@media all and (max-width: 319px) {
/* nasty phone */
#sizemicro {font-weight:bold;color:red;}
#sizesuper,#sizeregular,#sizepda,#sizenice {display:none;}
}
@media handheld {
#handheld {font-weight:bold;color:red;}
#screen {display:none;}
}
@media screen {
#screen {font-weight:bold;color:red;}
#handheld {display:none;}
}

Unusual Headers
Your browser sent these interesting or unusual HTTP headers.

<%
dim known,wap

known = " ALL_HTTP AUTH_TYPE CONTENT_LENGTH CONTENT_TYPE GATEWAY_INTERFACE " & _
" HTTP_ACCEPT_LANGUAGE HTTP_CONNECTION HTTP_COOKIE HTTP_HOST HTTP_COOKIE" & _
" LOGON_ACCEPT_ENCODING PATH_INFO PATH_TRANSLATED QUERY_STRING REMOTE_ADDR REMOTE_IDENT" & _
" REMOTE_HOST REQUEST_METHOD SCRIPT_MAP SCRIPT_NAME SERVER_NAME SERVER_PORT SERVER_PORT_SECURE" & _
" SERVER_PROTOCOL SERVER_SOFTWARE ALL_RAW APPL_MD_PATH APPL_PHYSICAL_PATH AUTH_PASSWORD" & _
" AUTH_USER CERT_COOKIE CERT_FLAGS CERT_ISSUER CERT_KEYSIZE CERT_SECRETKEYSIZE CERT_SERIALNUMBER" & _
" CERT_SERVER_ISSUER CERT_SERVER_SUBJECT CERT_SUBJECT HTTPS HTTPS_KEYSIZE HTTPS_SECRETKEYSIZE" & _
" HTTPS_SERVER_ISSUER HTTPS_SERVER_SUBJECT INSTANCE_ID INSTANCE_META_PATH LOCAL_ADDR LOGON_USER" & _
" REMOTE_USER URL HTTP_CACHE_CONTROL HTTP_KEEP_ALIVE HTTP_ACCEPT_CHARSET HTTP_ACCEPT_ENCODING" & _
" HTTP_X_NAVID HTTP_X_BROWSER_TIMESTAMP "

For Each name In Request.ServerVariables
If instr(known," " & name & " ") <1 then
response.write "" & name & "
" & Request.ServerVariables(name) & "
"
end if
if "HTTP_X_WAP_PROFILE"=name then
wap = Request.ServerVariables(name)
end if
Next

name = Request.ServerVariables("HTTP_ACCEPT")
if instr(name,"vnd.wap") > 0 then
response.write "Handheld accepts WAP"
end if
if instr(name,"jpeg") > 0 then
response.write "Image (jpegs) OK"
end if
if instr(name,"css") > 0 then
response.write "CSS OK"
end if
if instr(name,"script") > 0 then
response.write "Script OK"
end if
%>
CSS on the browser sees:-
CSS

is bad

Super Screen


Regular Screen


PDA / Blackberry


iPhone or upmarket


Small lowRes phone

CSS Media=handheld

CSS Media=screen

document.write("Javascript Rules!");

Just doin' my best at www.jinotega.com
Tony Robins

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 10 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I have a MotoQ with Windows

I have a MotoQ with Windows Mobile 5 and their version of IE.

I get

Unusual Headers
Your browser sent these interesting or unusual HTTP headers.
HTTP_ACCEPT
*/*
HTTP_USER_AGENT
and that list goes on theni get

CSS on the browser sees:-

CSS
is bad

Super Screen

Regular Screen

PDA / Blackberry

etc etc

Javascript Rules!

Basically the same thing I see when I go to that site with Firefox, except the unusual headers list is really long.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 4 years 46 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Here is what my Palm

Here is what my Palm Tungsten E2 (running Blazer) says:

Unusual Headers
Your browser sent these interesting or unusual HTTP headers.
HTTP_PRAGMA
no-cache
HTTP_ACCEPT
text/html, application/vnd.wap.xhtml+xml, application/xhtml+xml; profile="http://www.wapforum.org/xhtml", image/gif, image/jpeg, image/png, image/bmp, image/vnd.wap.wbmp, application/octet-stream, image/pjpeg, application/vnd.palm, application/vnd.rn-realmedia, application/vnd.rn-realsystem-rmj, application/x-pilot, audio/mp, audio/mp3, audio/mpeg, audio/x-mp3, audio/x-mpeg, audio/x-mpg, image/tiff, image/x-ms-bmp, image/x-png, text/plain, text/x-vCalendar, text/x-vCard, video/avi, video/mpeg, */*
HTTP_USER_AGENT
Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; PalmSource/Palm-Zir4; Blazer/4.Innocent 16;320x320
HTTP_X_WAP_PROFILE
"http://downloads.palmone.com/profiles/Blazer400.rdf"

Handheld accepts WAP
Image (jpegs) OK
CSS on the browser sees:-
CSS
Super Screen
Regular Screen
PDA / Blackberry
iPhone or upmarket
Small lowRes phone
Javascript Rules!

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Phone - SE K750i

Phone - Sony Ericsson K750i
--------------------------------------------

Unusual Headers
Your browser sent these
interesting or unusual
HTTP headers.
HTTP_VIA
HTTP/1.1 Viahostname
(Erlang Eproxy 1.Innocent
HTTP_ACCEPT
application/vnd.wap.xhtm
l+xml,
application/vnd.wap.wmlc
,application/xhtml+xml,
image/gif, */*
HTTP_USER_AGENT
SonyEricssonK750i/R1CA
Browser/SEMC-Browser/4
.2 Profile/MIDP-2.0
Configuration/CLDC-1.1
HTTP_X_WAP_PROFILE
"http://wap.sonyericsson
.com/UAprof/K750iA101.x
ml"
Handheld accepts
WAP
CSS on the browser
sees:-

CSS
CSS Media=handheld

--------------------------------------------
I'm pleased you're taking the time to investigate this matter and I look forward to seeing your considered conclusions. Well done Smile

Life's a b*tch and then you die!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 15 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

My rather fantabulous

My rather fantabulous Motorola V550 displays:

Quote:

Unusual Headers:

Your browser sent these
interesting or unusual HTTP
headers:

HTTP_VIA
HTTP/1.1 msgwsl22 (XMG
724Solutions HTG
XMG-31_VODAFONE_M3_B030
20070724.091400),1.1
frankenstein1:3128 (squid/2.
6.STABLE9-20070214)

HTTP_ACCEPT
application/xhtml+xml,text/
html,application/vnd.wap.wm
lc,application/vnd.wap.wbxm
l,application/vnd.wapwmlscr
iptc,text/css,application/vnd
.wap.xhtml+xml,application/v
nd.wap.multipart.related,appl
ication/vnd.wap.multipart.mi
xed,multipart/mixed,applicati
on/vnd.wap.sic,application/v
nd.oma.drm.message,

....

HTTP_USER_AGENT
MOT-V550/0E.66.0ER
MIB/2.2.1 Profile/MIDP-2.0
Configuration/CLDC-1.0

HTTP_X_WAP_PROFILE
"http://motorola.handango.c
om/phoneconfig/v550/Profi
le/v550.rdf"

HTTP_X_BLUECOAT_VIA
51B488A6D9817A2D

Handheld accepts WAP

Images (jpegs) OK

CSS OK

Script OK

CSS on the browser
sees:-

CSS
CSS Media=handheld

document.write("Javascript
Rules!);

Verschwindende wrote:
  • CSS doesn't make pies

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

... thoughts so far

Excellent feedback, thanks guys, keep it coming. Especially windows CE devices, iPhone and obnoxiously ancient cell phones. (Toasters and fridges may also apply Smile )

existence of vnd.wap in the ACCEPT or existence of HTTP_X_WAP_PROFILE = 100% certainty small device. server can send small size low res pictures, strip all optional content and rejig the navigation. Better to not download at all than to download and have CSS throw it away.

screen width as known to css If my page shows 5 different screen types, it means the CSS on your device is not capable of telling CSS the screen width as in media all and (max-width 200). There is no known way of getting that info back up to the server (oh, how I wish!).

...and to relate it all to CSS-land Smile
img,div{max-width:99%!important} /*Try it, you'll like it.*/

More please! This is good. Full report early December depending on input quantity and variety.

Just doin' my best at www.jinotega.com
Tony Robins

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A couple

A couple more.

Blackberry:

Unusual Headers Your browser sent these interesting or unusual HTTP headers.
HTTP_VIAMDS_3.2.4.10
HTTP_ACCEPT
application/vnd.rim.html,text/html,application/xhtml+xml,
application/vnd.wap.xhtml+xml,text/vnd.sun.j2me.app-descriptor,
image/vnd.rim.png,image/jpeg,application/x-vnd.rim.pme.b,
application/vnd.rim.ucs,image/gif;anim=1,application/vnd.wap.wmlc;q=0.9,
application/vnd.wap.wmlscriptc;q=0.7,text/vnd.wap.wml;q=0.7,*/*;q=0.5
HTTP_USER_AGENT
BlackBerry8310/4.2.2 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/120
HTTP_PROFILE
http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf
HTTP_X_WAP_PROFILE
"http://www.blackberry.net/go/mobile/profiles/uaprof/8310/4.2.2.rdf"
Handheld accepts WAPImage (jpegs) OKScript OK
CSS on the browser sees:-
CSS is badSuper
ScreenRegular
ScreenPDA / BlackberryiPhone or
upmarketSmall
lowRes
phoneCSS
Media=handheldCSS
Media=screen

HTC Touch:

Unusual HeadersYour browser sent these interesting or unusual HTTP headers.
HTTP_ACCEPT
*/*
HTTP_USER_AGENT
PPC; 240x320; HTC_P3450/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 6.12)
HTTP_UA_OS
Windows CE (Pocket PC) - Version 5.2
HTTP_UA_COLOR
color16
HTTP_X_WAP_PROFILE
"http://www.htcmms.com.tw/gen/elf-1.0.xml"
HTTP_UA_VOICE
TRUE
HTTP_UA_PIXELS
240x320
HTTP_UA_CPU
ARM
HTTP_X_BLUECOAT_VIA
DEC7359B5A685D22
CSS on the browser sees:
-CSS is bad
Super Screen
Regular Screen
PDA / Blackberry
iPhone or upmarket
Small lowRes phone
CSS Media=handheld
CSS Media=screen
Javascript Rules!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

screen size/ character size

From the blackberry profile ...
ScreenSize 320x240 ScreenSizeChar 32x16 StandardFontProportional Yes
... so, allthough it looks superficially like courier 10px would be a good call, it'll accept arial just fine.

it also tells me
MaxMessageSize 307,200 - no super heavy pages please.
MaxImageResolution 1280x1024 - sorry, mr. RIM, my server will STILL send you very low graphics. After all, whats the point sending 1280 wide pix to a 320 wide device?

BitsPerPixel 16 ... not for THIS device, but perhaps my auto-generator of small device graphics should cut the width AND the number of colors before lowering the jpeg quality. ... ideas

The HTC Touch does part of it VERY right. Bang there on the page call
HTTP_UA_PIXELS
240x320
...no need for a database to go look it up, no need for an XML request to a service. YES! No CSS, once again, means I cannot use this on the device end but I can sure as heck fix that page at the server.

Just doin' my best at www.jinotega.com
Tony Robins

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

wrap on handhelds

Summary

Sorry CSS folks, if your layout hangs its hat on CSS then your web site will look completely different or become unusable on most handhelds - they do not read style sheets. Whether they follow INLINE styles is another issue that is perhaps worth checking out. All those wonderful cascades, inheritances, descender, sob;-)

Less than 30% of the devices submitted gave any indication of available screen width to the server. Those that did, gave it in WAP profiles that are expensive and tricky for the server to process. There has been a lot of work on WALL and WURFL that can be used on the server to discover information but it is heuristically analyzing the browser ID and thats not a programmers dream in terms of stability. (read FLAKY). However it looks to be the only game in town.

Just about all devices say they accept javascript although which version and how completely would be impossible to discover. Writing massive scripts for phones to do what CSS does would seem risky.

All devices accept pictures although memory, number of colors and processing power would be limiting factors. If you have a 96 pixel wide screen, exactly HOW important is your picture?

Downloads: many customers pay per kb downloaded so sending a 33kb logo is costing them. Best bet is to not send it at all, second choice is to have a low resolution, 16 bit color, tiny width version of the logo. ... but how to discover that width?

Cheap server detection: Look for WAP in the ACCEPT header. If found, kill all decorative graphics and switch to the low res graphics library.

testing on firefox. If you reduce your screen width on firefox to 150px and you web site turns to dust, forget cell phones ever existed!

Not pretty. Thanks for your help guys very instructive.

Just doin' my best at www.jinotega.com
Tony Robins

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

In Firefox's webdeveloper

In Firefox's webdeveloper extension, choose misc⇒small screen rendering. I don't know which engine it emulates, but positional css and background images are dropped. Foreground images are scaled to fit.

In Opera, select view⇒small screen (or alt+shift+F11), to get Opera's mobile rendering engine. It seems to follow the same design as Firefox—or maybe it's vice versa.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

kk5st wrote:It seems to

kk5st wrote:
It seems to follow the same design as Firefox—or maybe it's vice versa.

Vice versa I'd say.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 30 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

irt kk5st firefox web developer

Downloaded and installed Firefox webdeveloper toolbar, thanks for the lead. Gives me some inkling of what a handheld will do with a regular page if it receives one. Now I need to reverse that equation and say "If the handheld will squeeze my foreground graphic, how can the server feed only the right sized one in the first place?". Seems little point serving a large high res photo, user paying download costs, only to have the handheld browser discard 80% of the information in the image.

I will change all decorative images to background now, based on the idea that the handheld browser will decline to even download them. Small price to pay is that default printing from IE Firefox Opera Safari will not print them.
Decision: thats the way it goes - the future is mobile.
(not sure how to handle the hole on the page where the bg image would have been. would like a 'click here for image' but ... dang! out of ideas.)

Firefox webdeveloper does not tell the server the current available width - Opera does and thus takes all the guesswork out at the server end. Oddly, this means its easier for a server to create correct emulated handheld pages for an Opera browser than it is for a genuine handheld! Weird. Once all phones use Opera, we will have a decent solution (Oh come the day!)

Any candidates for "Best auto-switched web site"?
(Guess this topic strayed a bit far from CSS. Thanks for tolerance)

Just doin' my best at www.jinotega.com
Tony Robins

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

re: larger/hi-def images

From the user experience angle, it is a Bad Thing® to feed them large images (download size) without giving them the choice.

Use only smaller, low def images on a landing page. Don't eliminate images—they are an important part of the viewer experience. If you want to show big pics, link to them and give notice of the download size. Anything else is impolite.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Tyssen wrote:kk5st wrote:It

Tyssen wrote:
kk5st wrote:
It seems to follow the same design as Firefox—or maybe it's vice versa.

Vice versa I'd say.

I wouldn't argue with you on that. Opera seems to take mobiles seriously.

Maybe Firefox uses this engine.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Opera are definitely the

Opera are definitely the ones that have seemingly invested the most time and research into handhelds, the results that I have seen from Operas 'Mini' client/server setup are impressive with complex site designs rendering pretty faithfully. I would be happy if all phones simply came with the Opera Java client

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me