/mobile modifications for iPhone

Development-related discussion, including bundled plugins
scottywz
Bear Rating Trainee
Bear Rating Trainee
Posts: 6
Joined: 03 Apr 2008, 01:24
Location: Texas, USA
Contact:

/mobile modifications for iPhone

Postby scottywz » 16 Jul 2008, 06:35

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

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: /mobile modifications for iPhone

Postby fox » 16 Jul 2008, 08:48

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.

scottywz
Bear Rating Trainee
Bear Rating Trainee
Posts: 6
Joined: 03 Apr 2008, 01:24
Location: Texas, USA
Contact:

Re: /mobile modifications for iPhone

Postby scottywz » 16 Jul 2008, 22:58

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.

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: /mobile modifications for iPhone

Postby fox » 17 Jul 2008, 12:12

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.

constancy
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 19 Aug 2009, 09:21

Re: /mobile modifications for iPhone

Postby constancy » 20 Aug 2009, 13:56

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
Last edited by constancy on 21 Aug 2009, 14:23, edited 1 time in total.

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: /mobile modifications for iPhone

Postby fox » 20 Aug 2009, 14:57

I didn't exactly understand what you need accomplished, but CSS documentation is readily available here: http://www.w3.org/TR/CSS2

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: /mobile modifications for iPhone

Postby fox » 21 Dec 2009, 13:55

From the "it takes me a while" department:

Image

Image

Image

numer
Bear Rating Trainee
Bear Rating Trainee
Posts: 1
Joined: 06 Jan 2010, 17:27

Re: /mobile modifications for iPhone

Postby numer » 06 Jan 2010, 17:27

is the code for the above iphone-version of tt-rss available?

that looks great!

thank you in advance

User avatar
fox
^ me reading your posts ^
Posts: 6318
Joined: 27 Aug 2005, 22:53
Location: Saint-Petersburg, Russia
Contact:

Re: /mobile modifications for iPhone

Postby fox » 06 Jan 2010, 18:12

It's in the trunk, as usual.


Return to “Development”

Who is online

Users browsing this forum: No registered users and 1 guest