Проблемы с веб-сайтом для мобильных телефонов

Question

Я практикую на мобильном сайте, но сталкиваюсь с двумя проблемами.

На моем iPhone я могу нажать кнопку в середине браузера Safari и использовать «Добавить на рабочий стол», чтобы разместить значок приложения на моем экране iPhone между другими приложениями. Когда я нажимаю значок своего сайта, он явно перенаправляет меня на мой сайт и (благодаря файлу javascript) скрывает навигационные панели браузера. Хотя, когда я нажимаю ссылку «href» на сайте, меня забирают в браузер сафари, чтобы открыть его там.

Я думаю, это потому, что я написал это так:

И на моем мобильном телефоне, я доступ к сайту с помощью IP-адреса. Есть ли способ решить это?

-

Другая проблема:

Когда я использую «добавить в главный экран» в Safari, я должен дать ему имя. Он автоматически использует мой «заголовок», указанный в файле HMTL. Но как я должен предоставить приложение иконку? Это в настоящее время только с помощью какой-то скриншотом сайта как значок ..

Answer 1

iphone-app-icon-html-web-app-home-screen-icon

Веб-браузер iPhone Mobile Safari распознает специальный HTML-тег, который позволяет добавить значок приложения iPhone к вашему HTML приложения. Вот синтаксис, который позволяет добавить значок приложения iPhone к вашему веб-приложение:

<link rel="apple-touch-icon" href="/my-app-icon.png" /> 

Этот HTML ссылка тег с-сенсорный значок яблока в поле REL сообщает браузеру iPhone Mobile Safari, чтобы использовать этот значок в качестве значок приложения для вашего веб-приложения.

IPad и iPhone значок приложения размер пикселя

Для поддержки высокого разрешения iPhone 4, ваш iPhone значок приложения должен быть значок 114 на 114 пикселей. В старых iPhone используются значки 56x56 пикселей (или, возможно, 57x57), а iPad использует значок 72x72 пикселей, а поставляемое вами изображение будет уменьшено и будет работать на всех этих устройствах. Вот краткое резюме:

iPhone 4 - 114x114 pixels 
Older iPhone - 57x57 pixels 
iPad (version 1) - 72x72 pixels 

Если вы предпочитаете немного больше контроля вашего приложения размер значка, документация Apple, показывает следующие примеры:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />