Mobile Safari Tweaks for TwentyTen

[Simek]

Use additional style sheet when HTTP_USER_AGENT is a Mobile Safari ( iPad, iPhone or iPod Touch ).

Changes:

• custom tap highlight color for various links and menu
  
• some font size adjustments

Changes were tested on iPhone 2G, iPhone 3G and iPod Touch 2G. I'm still not 100% sure that HTTP_USER_AGENT for iPad is correct, so if some could prove it or post link to information I'll be thankful.

[Simek]

I've just found a prove for iPad UA:
​http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones

[nacin]

Not a bad idea, though we'll want to move that into functions.php and probably hook into wp_head.

What I've generally seen is this, which has some forward thinking in mind:

if ( preg_match( '/Apple.*Mobile.*Safari/i', $_SERVER['HTTP_USER_AGENT'] ) )

[nacin]

Current patch is a good proof of concept. We need some UI/UX testing to continue, and also an indication of whether including this is desirable for core.

[iammattthomas]

Just saw this referenced on the main twentyten ticket; I'll take a look at this tonight and see how it looks.

[iammattthomas]

Updated version of patch - renamed css file and removed custom highlight colors

[automattor]

(In [13554]) Add mobile webkit styles for twentyten. See #12303

[iammattthomas]

I made a patch -- then having fully awoken, remembered I could commit it myself. :) Thanks Simek for the original patch; I agreed with the font size adjustments but decided against incorporating the custom highlight colors. I prefer to leave them as the system defaults unless there's a compelling reason otherwise; and I think the neutral color defaults are good for twentyten.

[nacin]

(In [13555]) Cleaner and ideally future-proof detection of mobile Safari browsers. see #12303

[iammattthomas]

(In [13556]) Tweaks to mobile-webkit styles; see #12303

[filosofo]

Replying to nacin:

future-proof detection of mobile Safari browsers. see #12303

I doubt it. ​History suggests the next wannabes will put "iPhone" in their user-agent strings.

[nacin]

filosofo mentioned on IRC that -webkit-text-size-adjust is mobile Safari only, so we can simply add those to the existing stylesheet and remove mobile-webkit.css.

[iammattthomas]

(In [13566]) Moving mobile webkit styles to style.css; adjusting widget_search label and site-description sizes. See #12303

[iammattthomas]

I believe this is fixed as of r13566.