By smart-accounts on

Probably most Drupal 6.3 sites have this weird problem with some but not all mobile phones, but just don't know it yet. And probably there's a simple fix.

I've been playing with a couple cell phones, and there's a serious line-length problem with one of them. Even www.drupal.org has this problem, to some extent. But major mainstream sites don't -- so there must be some way to fix the problem without fixing the phones (which in a perfect world is what would be done).

I've been testing two phones, below, with four sites: drupal.org, nytimes.com, economist.com, and my Drupal site smart-accounts.org.

First, there's NO big problem with the display of any of these sites with the LG DARE with Verizon Wireless. But this high-end phone is overpriced, and has various inconveniences, glitches, and Verizon policy problems that I'm still trying to deal with. Frankly, I'd rather kiss Verizon goodbye.

MetroPCS has less expensive, unlimited access in its limited coverage areas. It only has one QWERTY phone at this time, the Samsung Messager (sic), also named SCH-r450 Series Tri-Band Phone. So far I love the phone (or perhaps it's the relative humility of MetroPCS, which knows it can't get away with what Verizon expects it can get away with). But on its small screen:

* nytimes.com and economist.com work just fine. Text uses the whole screen, can display about 32 characters per line, and is formatted right.

* www.drupal.org has a tolerable problem. Text only uses about 18 characters (unless it's part of a link) -- leaving almost half of the already-small screen unused, and therefore requiring twice as much scrolling as it should.

* my site has an intolerable problem. Ordinary text displays as a single character per line, on the left side of the page. You can read the text vertically, but obviously that's not satisfactory. Probably most Drupal sites have this problem as well.

Two exceptions may hint at what's going on. On my site, the mission statement will show up to 5 characters per line instead of just one (occasionally up to six, if the characters are less wide). Also, links display fine; they are not divided on the screen.

I'm no expert in CSS, which is probably where the problem is.

My mission statement that shows 5 or 6 characters per line reaches the mobile phones as:

Mission: To show the unexpected value of financial accounts...

But the plain text that shows as only one character per line reaches the phone as:

In our view, the music copyright fight ...

Plain text hand-coded in HTML (without sending any class and without using div) works fine -- no problem in formatting on this small mobile-phone screen.

Oddly enough, the LG DARE high-end phone has a minor, opposite problem. Lines do not break at the edge of the screen (with some phone settings), so you have to keep scrolling back and forth while reading.

The Mobi stuff in Drupal won't help here, as I don't want to have a separate site display for mobile phones. On my simple site the standard text display would be fine -- if only I could diagnose and fix the one-character-per-line problem, which seems to be in the "content" class.

I could remove this class, and then probably the mobile-phone display would work. But I don't know why the class is in Drupal in the first place, and don't want to break something else.

Does anyone have suggestions or ideas on how to fix the one-character-per-line problem -- which occurs on at least one mobile phone, and most likely some others?

John

⋅ Categories: Drupal 6.x

Comments

nofue’s picture

nofue commented

As far as I know, mobiles aren't mobiles… My iPhone 3G Vs. 2.0.2 displays all the sites you listed nicely (although some margins would be great for any body content on any site, but that's a minor issue). But then the iPhone is more a computer which can also be used as a phone, running a "real browser", while other mobiles have less capable browsers -- bringing all the browser woes to life again…

Maybe you should have a look to Apple Developer iPhone pages where they discuss differences between mobiles and various techniques to tackle them in depth… There's a wealth of CSS3 commands to deal with mobiles and I guess that Apple Developer would make a good starting point for further research…

Norbert

-- form follows function

Norbert

-- form follows function

Jeff Burnz’s picture

Jeff Burnz commented

On my Sony Ericsson I use Opera mini http://www.operamini.com/ which displays most sites quite well, including most if not all of my Drupal sites. My2cents.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.