View Full Version : Viewing on mobile devices
03-27-2008, 07:59 AM
Are there any templates or Add-ons that detect that the site is being read on a mobile device - phone/iphone/itouch etc and then present the site with the necessary configuration? Or a separate Template for mobile devices?
03-27-2008, 08:07 PM
I have been thinking as well about creating something for the mobile device. As screen estate is tight, I think we need a new template that is automatically instantiated when a mobile device is requesting a page. This template should only show the image for example and no previous/next links.
The choice for one or another template should be based upon the 'browser capabilities'. This is a set of data for browsers and devices to describe the capabities and metrics.
In the administration (options/template), the 'switch template' section should contain a dropdown where you can choose the template for a mobile device.
No idea yet how I could instantiate a different template based upon the browser capabilities... Use url rewriting to check the browser agent string before index.php is started?
03-27-2008, 08:24 PM
Sounds like a perfect use of front-page addons.
An addon could be built that would detect known mobile phone browsers and switch to a "mobile" template.
03-28-2008, 10:07 AM
I don't understand the "front workspaces" yet, but I'll look into it.
First I have to upgrade my blog to 1.7.1... and upgrade the Geos Category addon (which I have updated to do something cool with the archive view of photos) and then implement url rewriting.
03-31-2008, 05:18 PM
STYLING FOR THE IPHONE
Before pursuing further adaptions, consider the hardware we’re dealing with—that of both the phone and our bodies. The screen on the iPhone squeezes 160 pixels into every inch of display space—and you’re using your finger to access that display. If you press your finger against the edge of a ruler, you’ll see it uses somewhere between 1/4” and 1/2” at the point of contact. That corresponds to anywhere between 40 and 80 pixels of display space.
Now, look at your web page. How many pixels are between the items on your navbar? If you answer less than 40, then you’re effectively asking your visitor to play Russian roulette: their 40-80 pixel finger isn’t going to hit your 20 pixel link effectively.
When you use iPhone specific styles, it improves accessibility for someone working on a high-density mobile device. My rule of thumb is to double important elements: bumping a font-size from 18px to 36px, for example. You’ll want to focus both on interactive elements (such as <a> and <input>) and navigational indicators (such as section titles and bread crumb trails).
So how do you use styling rules that apply only to the iPhone? The answer is to use a media query on a <link> tag. The following rule is recommended by Apple:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
Other browsers will ignore iPhone.css since they have a maximum device width greater than 480px.
vBulletin® v3.7.3, Copyright ©2000-2013, Jelsoft Enterprises Ltd.