Making life easier for Safari on iPhone

    Make life easier for the Safari user on the iPhone.

    In my last article , we looked at how it is possible to make a site version adapted for the Apple iPhone in a short period of time. Today I continue my article. Now we will consider some meta tags (and not only) that will make life easier not only for the site visitor, but also for the web project developer.



    All the techniques mentioned in the articles were successfully applied in one of my projects, so I ask you not to consider it as PR, since the images in the article contain fragments from my site, this was done for greater clarity, and not for PR purposes.
    So let's get started.



    1) Define devices using user-agent (PHP).


    How can we determine that the user has switched from the mobile version of Safari, everything is very simple, we use the following code:



    The example shows the change in my z-music.ru project in accordance with the device used.

    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
    {

    //В данном условии размещаем код , предназначенный для пользователей мобильной версии Safari.

    }
    else{

    //Тут размещаем код для остальных браузеров
    }

    * This source code was highlighted with Source Code Highlighter.


    If we want this condition to work for owners of Android devices, we slightly change the selection condition.

    if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'Android'))

    * This source code was highlighted with Source Code Highlighter.


    2) We prohibit the increase / decrease of the page.


    If your page is optimized for the mobile version of Safari (the maximum page width does not exceed 320px), then you probably want the user to not be able to increase and decrease the content of the page (perform the so-called pinch zoom). For this case, we have a special meta tag.



    * This source code was highlighted with Source Code Highlighter.


    3) Display page in 1: 1 scale.


    In order for the user to immediately see your site on a 1: 1 scale when loading, you can add the following tag (in this case, unlike the previous tag, pinch zoom can be performed).





    * This source code was highlighted with Source Code Highlighter.


    4) Turn the page into a web application.



    Back in the days of the first firmware for the iPhone, before the App Store, web applications were very popular. What is the peculiarity of web applications?
    Unlike regular pages, web applications do not use the safari shell, so you will not see such standard elements as: address bar and navigation bar.

    In order for the browser to know that there is a web application in front of it, it is necessary to add the following meta tag.



    * This source code was highlighted with Source Code Highlighter.




    In order to add a web application, you need to do the following simple operation.
    Go to Safari> click + on the navigation bar> Select "Add to Home".

    4.1) Add the boot image to the web application.


    What kind of web application can do without a boot image, it is necessary so that the user does not observe a blank screen while loading your web application.
    Image size should be 320x460 pixels.




    * This source code was highlighted with Source Code Highlighter.

    4.2) Add the icon.



    To set the icon, use the following tag.
    The image should be 57x57 in size. By standard, the browser automatically adds a rounded highlight to the icon, on how to remove glare it is written below.



    * This source code was highlighted with Source Code Highlighter.


    4.3) Add an icon without effects (highlights).



    In order to avoid flare when installing the icon (in some cases this spoils the appearance of the icon), adding a tag specified in clause 4.2 is not necessary, it is enough that you put an image with the name apple-touch-icon-precomposed.png in the root of your site , (Important: no other names will be suitable, and also if the picture is not at the root of the site, the icon will not work!)



    4.4) Change the color of the status bar of the web application.


    The status of the bar can also change color, you must use the following meta tag.


    * This source code was highlighted with Source Code Highlighter.


    It looks like this:

    This is where I finish my article, thanks for your attention.


    Also popular now: