/    Sign up×
Community /Pin to ProfileBookmark

iTouch and iPod optimal CSS template

Copy linkTweet thisAlerts:
Apr 08.2010

Is there a CSS template that will allow optimal display
of iTouch and iPod (and possibly iPad) layouts in both horizontal and vertical modes?

Is it better to <link …> or @media or make CSS assignments imbedded in the script code?

Any recommendations for <div> and <table> tags sizes?

How useful is the CSS media=’handheld’ or other assignments for these and other mobile devices?

Is there a way to see (or simulate)0 the proportional CSS displays on a desktop / laptop computer as they would appear on the mobile devices during the development phase?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 08.2010 — I have worked only for iPhone applications. Apple has some recommendations for iPhone GUI elements (size, fonts, and so on). You may Google for or, if you are interested, you may wait till tomorrow (I am home now 22:30 PM here) for me to arrive at work and collect all the documentation about the issue.
Copy linkTweet thisAlerts:
@JMRKERauthorApr 08.2010 — I have worked only for iPhone applications. Apple has some recommendations for iPhone GUI elements (size, fonts, and so on). You may Google for or, if you are interested, you may wait till tomorrow (I am home now 22:30 PM here) for me to arrive at work and collect all the documentation about the issue.[/QUOTE]

I can wait and I would appreciate what you have.

I have 'googled', but there seems to be conflicting information and there does not seem to be one "best" recommendation that I can find.

My current main interest is being able to not over/under-flow the screen with information when the device is rotated vertical - horizontal and back.

Maybe I'll have to create some 'aspect ratio' function (???)

Anyway, go to bed, have a good night's sleep and arise well rested!

?
Copy linkTweet thisAlerts:
@rnd_meApr 08.2010 — iPhone lies about CSS media='handheld', which won't work.

@media queries do work, and can be used to create horizontag and vertical classes that adjust your whoile document.

simply put a couple <body> rules (font size, etc) in specific media query sections, and you wont need any javascript or hacks.
Copy linkTweet thisAlerts:
@JMRKERauthorApr 08.2010 — iPhone lies about CSS media='handheld', which won't work.

@media queries do work, and can be used to create horizontag and vertical classes that adjust your whoile document.

simply put a couple <body> rules (font size, etc) in specific media query sections, and you wont need any javascript or hacks.[/QUOTE]

Thanks, I'll do a little more research using those keywords.

Do you have any samples files or applications that I could examine?
Copy linkTweet thisAlerts:
@KorApr 09.2010 — OK, now, here's the official Apple documentation/reference about Safari and Safari for iPhone development:

http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html

Some interesting things about design for iPhone in this article:

http://evolt.org/design-for-iphone

A pertinent analysis about the way iPhone and Safari for iPhone handle the events:

http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html

And a compatibility CSS table for smartphones (iPhone included):

http://www.quirksmode.org/m/css.html

If you are a designer and you need GUI Photoshop PSD files, send me a PM and give me your email address where I can send you the stuff.

Regarding the simulator/emulator, well, you need a MAC by all means. The SDK for iPhone/iPod etc, documentation and all you need is to be found at the official apple developer site:

http://developer.apple.com/iphone/index.action

you need to register there, but it is for free

Good luck!
Copy linkTweet thisAlerts:
@JMRKERauthorApr 09.2010 — Thank you "Kor".

You've given me a lot to look at and I appreciate it.

?
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...