Prepare your site for iPhone • WordPress Help

Impressive the compilation made by Cats who code about codes with which to adapt your site to the visualization in iPhone. As I think it is of great interest to developers and advanced users and that, of course, are applicable to WordPress, here you have them with some adaptation to our environment:

Detect iPhones and iPods using Javascript

When developing for iPhone or iPod Touch the first thing to do is detect it so that, then, we apply codes or styles. The following code detects iPhones or iPods using Javascript, and redirects them to a specific page for iPhone.


Detecting iPhones and iPods using PHP

Although the previous code was nciona of wonder can that Javascript be deactivated in the iPhone. If this is the case, you can use PHP to detect iPhones or iPod Touch.


Define the width of iPhone as viewport

In many occasions you visit a website with your iPhone and see it in miniature. The reason is that the developer forgot to define the viewport (or does not know that it exists). The declaration of width = device-width allows you to set the width of the document to the width of the iPhone screen. The other two statements are very useful if you are developing a site "just for iPhone". Otherwise you can delete these two statements.
Defining a viewport is easy: Simply insert the following goal in the "head" section of your site (file "index.php" of the active template):


Insert a specific icon for iPhone

When a user adds your website to your home page, the iPhone uses a screenshot of your site as an icon. But you can offer a specific icon, which is much better.
Defining a custom icon for iPhone is easy: Simply paste the following code in the "head" section of your site ("index.php" file of the template active). The image must be 57px by 57px in format .png . You do not have to add glitters or corners as the iPhone automatically adds them:

Source: tutorial-building-a-website-for-the-iphone /

Prevent Safari from adjusting text size when rotating

When you rotate the iPhone, Safarie adjusts the text size. If for some reason you prefer to avoid this effect you just have to use the following CSS, which you will have to add to your style sheet (file "style.css" of your active template).
The declaration -webkit-text -size-adjust is a unique CSS property of webkit that allows you to control the text setting.

Source: -iphone /

Detect the orientation of the iPhone

As the iPhone allows you to see the page in portrait or landscape you may need to detect in which mode the document will be visible.
This Javascript function detects the current orientation of the iPhone and applies a specific CSS class for each targeting mode. Note that in this example the CSS class is added to the ID of page_wrapper . Replace it with the desired ID name (line 24)