Making life easier for Safari on iPhone
Making life easier for a Safari user on an iPhone.
In my last article , we discussed how it is possible to produce a version of the site adapted for the Apple iPhone in a short period of time. Today I continue my article. Now we will look at some meta tags (and not only) that will make life easier not only for the site visitor, but also for the developer of the web project.
')
All the techniques mentioned in the articles were successfully applied in one of my projects, so please do not take it for PR, since the images in the article contain fragments from my site, this is done for clarity and not for PR.
So let's get started.
How do we determine that the user has moved from the mobile version of Safari, everything is very simple, use the following code:
The example shows the change in my project z-music.ru in accordance with the device used.
If we want this condition to work for owners of Android devices, slightly change the selection condition.
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 page content (perform the so-called pinch zoom). For such a case, we have a special meta tag.
In order for the user to immediately see your site on a 1: 1 scale, you can add the following tag (however, unlike the previous tag, pinch zoom is possible).
Back in the days of the first iPhone firmware, before the App Store, web applications were very popular. What is the feature of web applications?
Unlike ordinary pages, web applications do not use the safari shell, so you will not see such standard elements as: the address bar and the navigation bar.
In order for the browser to become aware that it has a web application, you need to add the following meta tag.
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".
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.
To install the icon, use the following tag.
The image should be 57x57. According to the standard, the browser automatically adds a rounded highlight to the icon, how to remove the highlights is written below.
In order to avoid the glare when installing the icon (in some cases it spoils the appearance of the icon), adding the tag specified in clause 4.2 is not necessary, it’s 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 match, and also if the picture is not in the root of the site, the icon will not work!)
The status of the bar is also possible to change the color, you must use the following meta tag.
It looks like this:
At this point I finish my article, thank you for your attention.
In my last article , we discussed how it is possible to produce a version of the site adapted for the Apple iPhone in a short period of time. Today I continue my article. Now we will look at some meta tags (and not only) that will make life easier not only for the site visitor, but also for the developer of the web project.
')
All the techniques mentioned in the articles were successfully applied in one of my projects, so please do not take it for PR, since the images in the article contain fragments from my site, this is done for clarity and not for PR.
So let's get started.
1) We define the device using the user-agent (PHP).
How do we determine that the user has moved from the mobile version of Safari, everything is very simple, use the following code:
The example shows the change in my project z-music.ru 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, 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) Forbid increase / decrease 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 page content (perform the so-called pinch zoom). For such a case, we have a special meta tag.
< meta content ="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name ="viewport" />
* This source code was highlighted with Source Code Highlighter .3) Display the page at a scale of 1: 1.
In order for the user to immediately see your site on a 1: 1 scale, you can add the following tag (however, unlike the previous tag, pinch zoom is possible).
< meta name = "viewport" content = "width=device-width" >
* This source code was highlighted with Source Code Highlighter .4) Turn the page into a web application.
Back in the days of the first iPhone firmware, before the App Store, web applications were very popular. What is the feature of web applications?
Unlike ordinary pages, web applications do not use the safari shell, so you will not see such standard elements as: the address bar and the navigation bar.
In order for the browser to become aware that it has a web application, you need to add the following meta tag.
< meta content ="yes" name ="apple-mobile-web-app-capable" />
* 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 a 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.
< link rel ="apple-touch-startup-image" href ="/images/startup.png" >
* This source code was highlighted with Source Code Highlighter .4.2) Add an icon.
To install the icon, use the following tag.
The image should be 57x57. According to the standard, the browser automatically adds a rounded highlight to the icon, how to remove the highlights is written below.
< link rel ="apple-touch-icon" href ="/custom_icon.png" />
* This source code was highlighted with Source Code Highlighter .4.3) Add an icon without effects (highlights).
In order to avoid the glare when installing the icon (in some cases it spoils the appearance of the icon), adding the tag specified in clause 4.2 is not necessary, it’s 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 match, and also if the picture is not in the root of the site, the icon will not work!)
4.4) Change the color bar status of the web application.
The status of the bar is also possible to change the color, you must use the following meta tag.
< meta name ="apple-mobile-web-app-status-bar-style" content ="black" />
* This source code was highlighted with Source Code Highlighter .It looks like this:
At this point I finish my article, thank you for your attention.
Source: https://habr.com/ru/post/80694/
All Articles