Html head title iphone

Reddit’s little corner for iPhone lovers (and some people who just mildly enjoy it…)

Is a thread a found with the same issue

This is apparently very recent

Does anyone have any solutions? Or causes?

Edit: This seems to be effecting a lot of people. It doesn’t discriminate between iPhone/android/Galaxy or MacBook apparently. Nor does it matter what your phone provider is either. It is also affecting my iPad. No one knows causes or anything as of yet. I will update this post more when there is more info out

Edit 2: As u/jonmarksbury pointed out a lot of the iPhone/iPod/iPad users that are having this issue are pre iOS7. This could possibly have something to do with it. No new info on other devices yet

EDIT 3: POSSIBLE SOLUTION: https://www.reddit.com/r/iphone/comments/3dcbew/htmlheadtitlesuccesstitleheadbodysuccessbodyhtml/ct3tzi1?context=3

EDIT 4: As many others have pointed out, turning off locations services/Auto connect/auto login will sometimes work. It has worked for a few people (not for me). So try it out!

Edit 5: possible solution for GS6 according to this: https://www.reddit.com/r/iphone/comments/3dcbew/htmlheadtitlesuccesstitleheadbodysuccessbodyhtml/ct3ujs6?context=3

EDIT 6: Temporary/possible android solution! https://www.reddit.com/r/iphone/comments/3dcbew/htmlheadtitlesuccesstitleheadbodysuccessbodyhtml/ct3v04d?context=3

No new info or news yet as far as I know. Everyone keep looking. If you see something comment it/pm me and I’ll add it to the post to make it more visible!

I’m tired as shit and it’s almost 2:00 AM I’m going to bed, I’ll update the post in the morning or whatever Peace out bros!

Источник

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

В нынешнее время мобильные гаджеты всё увереннее покоряют мир. Приблизительно год назад доля трафика от мобильных устройств составляла около 4%, а на сейчас этот показатель увеличился ровно в двое и теперь составляет 8%. Некоторые эксперты уже прогнозируют, что такая тенденция будет сохраняться и дальше. А пара экспертов из Cisco вообще утверждают, что доля мобильного трафика за 2016 год вырастет не в два, а в 18 раз.

Соответственно, можно с уверенностью сказать, что если разработчики еще не сталкивались с мобильным сегментом интернета, то пора начинать это делать прямо сейчас.

Сейчас мы рассмотрим некоторые элементы контейнера , причем те, с которыми верстальщики работающие с десктопными версиями сайта скорее всего даже и не сталкивались.

В первую очередь хочется начать с того, что добавим некоторое расширение нашему тегу :

[if IEMobile 7 ]> html class="iem7" lang="en"> [endif]--> [if (gt IEMobile 7)|!(IEMobile)]> html lang="en">

Благодаря такой манипуляции мы присвоим тегу класс .iem7, при условии, что страница будет открыта в мобильном IE. Это может крайне пригодится, ведь все знают, что порой страницы открываются очень по «странному» в этом браузере, и с помощью добавленного класса, это можно будет поправить.

Appcache

А вот добавляя manifest в тег мы можем подключить appcache. Это по сути включит кэширование страницы непосредственно в браузер, что позволит пользователю юзать приложение оффлайн. Ну а помимо этого пользователи смогут просматривать сайт когда нет сети (но это касается лишь тех страниц которые ранее были закешированны) , это позволит сайтам загружаться и открываться намного быстрее, ну и сервера будут менее загруженными.

Также AppCache дает возможность разработчикам задать список элементов, которые обязательно должны быть закешированны.

Чтобы это сделать, в файле необходимо записать следующее:

CACHE MANIFEST img/splash.png img/apple-touch-icon.png css/style.css js/libs/jquery.min.js js/libs/modernizr-2.5.min.js

Чтобы убедиться в верности заполнения данного файла, можно воспользоваться специальным валидатором.

Title

Самый обыденный тег, все знают, что он задает заголовок страницы, но в случае с мобильными сайтами, есть некоторые нюансы. В мобильной версии он работает в целом как и в десктопной, но иногда title используется для подписи вкладок, отметки сайта в истории браузера. Но бывает и так, что он выводится в самом верху экрана. А главное, о чем стоит помнить, так это то, что в отличии от десктопной версии, title мобильный имеет серьезное ограничение по символам, как правило это 15-40 символов в книжном режиме, и немного больше (60) в альбомном. Соответственно, в мобильной версии заголовок следует уменьшить.

HandheldFriendly

Следующим рассмотрим довольно специфический мета-тег HandheldFriendly. Когда то давно, этот тег был необходим для браузеров на мобильных ОС типа уже практически забытой Palm OS и всё еще актуальной Blackberry OS. Он определял разметку, «заточенную» под мобильные гаджеты. Сейчас он по сути делает тоже самое. Тег сообщает устройству, что страница версталась с учетом особенностей мобильного устройства, и что ее необходимо отображать не применяя масштабирование.

MobileOptimized

Очередной мета-тег, точно пригодится для IE. Это тег MobileOptimized. Его Microsoft сделала, чтобы задать фиксированную ширину странице, которая загружается в браузере IE. Задав в контенте этого тега точный горизонтальный размер странице в пикселях, она будет отображаться в одну колонку заданной ширины. Это может значительно упростить работу верстальщику, ведь браузер не будет пытаться подогнать ее так, как ему вздумается. Ну и помимо всего прочего, поисковые роботы, при индексировании страниц, так же обращают внимание на данный тег.

Viewport

А вот данному тегу можно посвятить целую статью. Но вкратце, что бы было понятно, данный мета-тег говорит браузеру какого размера область просмотра нам необходима. Это весьма полезно, ведь как правило мобильные браузеры пытаются уместить на дисплей мобильного гаджета сайт целиком, когда размер экрана маленький, то сайт выглядит настолько мелким, что прочитать что то становится проблематично. И данный тег помогает справится с этой проблемой.

Иконки

link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/h/apple-touch-icon.png"> link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/m/apple-touch-icon.png"> link rel="apple-touch-icon-precomposed" href="images/l/apple-touch-icon-precomposed.png">

Переходим к иконкам, ведь для мобильных гаджетов они крайне актуальны. Суть вот в чем, на iOS и Android можно закладку сайта разместить на главном экране. Там она соответственно будет отображаться в виде иконки. И вот чтобы там отображалась именно ваша иконка, необходимо в корне сайта разместить картинку с размерами 57×57 px и назвать ее apple-touch-icon.png.
Однако для iPhone выше третьего поколения размеры изображения изменились и составляют 114×114 px, а для iPad 72×72 px. Ну а чтобы не мучатся с этими размерами, можно добавить просто квадратную картинку, которую Safari уже сам обрежет так, как ему будет необходимо, а также в старых версиях он добавит классические эффекты типа скругленные углы и стеклянность.

Ну и конечно же иконка может иметь полупрозрачность, в таком случае все прозрачные элементы станут черными.

Но от всех этих эффектов можно отказаться, при необходимости. Для этого стоит вместо стандартного значения написать следующее: apple-touch-icon-precomposed. Как утверждают эксперты, лучше всего использовать оба типа иконок, это позволит добиться максимальной совместимости со всеми операционными системами.

Так же стоит упомянуть, что если ваш сайт будет рассчитан исключительно на iOS, то ссылки на иконки делать вовсе не обязательно. Для этого можно лишь создать необходимые файлы с правильными названиями и разрешениями, и конечно же положить в корень сайта.

А вот Android «понимает» иконки только начиная с версии 2.1 и то, исключительно precomposed.

А вот таким образом мы подключаем возможность получать иконки на прочих операционных системах.

Ну а пока сайт, открытый с рабочего стола загружается, ему необходима картинка, и именно эта строка позволяет ее задать.

Вместо этого изображения можно поставить всё, что угодно, но при отсутствии такового, будет отображаться скриншот последнего запуска страницы. Но лучше всего вместо этого изображения поставить логотип и название сайта. Как и в случае с иконками необходимо придерживаться размеров изображения.

• 320×480 (для версии iPhone ниже 4 поколения)
• 640×960 (старше 4го поколения и нового iPod Touch)
• 768×1004 (iPad в портретном режиме)
• 1024×748 (iPad в горизонтальном режиме)

Данный мета-тег позволяет открыть страницу в полноэкранном режиме, при условии, что она открывается из закладки с рабочего стола.

Есть и мета-тег, который поможет поменять внешний вид статус бара, так чтобы он лучше подходил под дизайн вашего сайта.

В контент данного тега можно записать — default, black или black-translucent.

Понять не сложно что к чему: Default — оставит всё без изменений; black — добавит фоном черный цвет; black-translucent — добавит к черному фону еще и полупрозрачность.

В завершение еще парочка нужных тегов:

Таким образом можно принудительно заставить IE использовать сглаживание шрифтов.

meta name="format-detection" content="telephone=no"> meta name="format-detection" content="address=no">

Ну и последние строки дают возможность забыть про автоматическое определение номеров и ссылок. То есть стандартно, в браузерах наборы цифр могут определяться как телефоны и по клику по ним, могут набираться. Так вот эти строки отключают эту функцию.

Источник