Page 1 of 1

/mobile modifications for iPhone

Posted: 16 Jul 2008, 06:35
by scottywz
Hi,

First, I really love TT-RSS! I've been using it for months now and I think it's better than many online readers like Google Reader.

Since I use my iPhone a lot, i modified the mobile version to look a little better on it. No AJAX or pretty iPhone-like UIs, just larger fonts and a bit of code at the top of the HTML to reduce the page width, since iPhone treats pages like regular, desktop-formatted sites.

Specifically, by putting this code in the <head> section, iPhone makes the mobile TTRSS as wide in pixels as the screen itself, while letting you zoom in on even tiny details:

Code: Select all

        <meta name="viewport" content="width=device-width, initial-scale: 1, minimum-scale: 1, maximum-scale=10"><!-- iPhone/iTouch support -->

Since this is not enough, I also changed the mobile CSS file to make the fonts bigger.

I have my changes, based on 1.2.24, in a ZIP file here: http://tt-rss.scott-wallace.net/iphone-mod-ttrss.zip. Just extract the mobile folder and put it in your TT directory.

Scott

Re: /mobile modifications for iPhone

Posted: 16 Jul 2008, 08:48
by fox
Hm. So, Safari on iPhone doesn't have a setting for a minimum font size? I have no problem with meta thing, but the font size being small is deliberate - so mobile would be more usable on QVGA devices and such, of which there is a truckload.

I'm not sure whether mobile supports user stylesheets, but this precisely the sort of thing they are useful for.

Re: /mobile modifications for iPhone

Posted: 16 Jul 2008, 22:58
by scottywz
You make a good point about keeping compatibility with other mobile devices. Maybe sniffing out the iPhone with the user agent might work better:

Code: Select all

<?php

        function is_apple_mobile_device($true, $false) {
                $user_agent = $_SERVER["HTTP_USER_AGENT"];
                if (
                 (
                  (
                   stristr($user_agent, "iPhone") ||
                   stristr($user_agent, "iPod")
                  ) &&
                  stristr($user_agent, "AppleWebKit") &&
                  stristr($user_agent, "Mobile") &&
                  stristr($user_agent, "Safari") &&  $_GET["noiphone"] != "true"
                 ) ||
                 $_GET["forceiphone"] == "true"
                )
                 return $true;
                else
                 return $false;
        }
        echo is_apple_mobile_device("iphone.css", "mobile.css");

?>


That should work for both iPhone and iPod touch, while allowing you to "force" the iPhone stylesheet with ?forceiphone=true in the address. I use a similar technique on my Web site to present a more iPhone-friendly sheet. You can also disable iPhone css with ?noiphone=true.

Note that this might not work with iPhone 3G since I don't know its user agent.

Edit: Change code to a function and fix syntax errors.
Edit 2: I updated the above ZIP with these changes.
Edit 3: I tested this on a Pocket PC and an iPhone and it works as expected.

Re: /mobile modifications for iPhone

Posted: 17 Jul 2008, 12:12
by fox
This still looks like something that is better solved in a more generic way through user stylesheets. I'm not sure that adding workarounds for some specific device, even if it is the shiniest toy of the year, is a good idea.

I have fixed the support for user stylesheets in mobile version (which you specify in preferences). You'd be able to do something like:

Code: Select all

#ttrssMobile div {
    font-size : 14pt;
}


So it won't overlap with overrides for tt-rss main if you'll need them. I think that should take care of this problem in a resonable enough way.

Re: /mobile modifications for iPhone

Posted: 20 Aug 2009, 13:56
by constancy
How do you insert distance between bullets in css? I want to add distance between the bulleted items in a list (without adding distance between each individual line). I suppose I could create a bunch of small, invisible divs, but there must be another way. Using paragraph tags puts way too much space in for what I need. Sorry if this sounds stupid, but I'm not much of an expert in html/css.
_____________
marriage bureau

Re: /mobile modifications for iPhone

Posted: 20 Aug 2009, 14:57
by fox
I didn't exactly understand what you need accomplished, but CSS documentation is readily available here: http://www.w3.org/TR/CSS2

Re: /mobile modifications for iPhone

Posted: 21 Dec 2009, 13:55
by fox
From the "it takes me a while" department:

Image

Image

Image

Re: /mobile modifications for iPhone

Posted: 06 Jan 2010, 17:27
by numer
is the code for the above iphone-version of tt-rss available?

that looks great!

thank you in advance

Re: /mobile modifications for iPhone

Posted: 06 Jan 2010, 18:12
by fox
It's in the trunk, as usual.