Html head mobile device

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

В нынешнее время мобильные гаджеты всё увереннее покоряют мир. Приблизительно год назад доля трафика от мобильных устройств составляла около 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">

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

Источник

Html head mobile device

Here is the mobile header we came up with explanations of the tags are below it.

The document type declaration

A strict document type declaration at the top of the code may indeed help with compatibility with Windows Phone 7. Windows Phone 7 uses the old IE box model for pages that are not xhtml strict, which means anything you specify a border around will not line up the same as all the other browsers in the world. (Opera uses this insane IE box model too.)

In these pages I use a transitional document type declaration and I deal with Mobile IE with a separate IE Mobile ONLY style sheet, it’s more reliable.

Metatags and Style Sheet links

Metatags

If you have a simple one column page with no large fixed widths already then one meta tag works like magic, the viewport tag. An improperly formatted viewport tag can stop your page from fitting properly if you change orientation from portrait to landscape and back.

This one works great for most mobile pages.

You can even add this to a non mobile page and it may fit a little better on a mobile screen by dropping any unused space around your content BUT if you use it on non mobile headers be sure to change user scalable to yes. This will allow the screen to zoom in on form fields and make them easier to fill.

For regular pages set user-scalable=yes,

The “apple-mobile-web-app” meta tags I use in the header give the home page of the mobile site the style of an application. Setting it to YES also allows all the other meta tags below.

The “apple-mobile-web-app-status-bar-style” meta tag only makes a difference when your users load that page from a home screen icon and the only choices are black or black-translucent. It removes the address bar and navigation bar and makes the status bar black like a full screen app. Balck translucent though will show the status bar over top of your web page.

The “format-detection content telephone = no” meta tag prevents the browser from automatically detecting numbers as phone numbers because on my site we use telephone link URLs on all phone links. We do this so we can abbreviate numbers to help them fit and so the automatic detection does not make a mistake.

The APPLE TOUCH ICON

You want your users to be able to place your library mobile site right on the home screen of their device so one way is to create the icon as a PNG image and put the PNG image in the root of your site and name it apple-touch-icon.png or apple-touch-icon-precomposed.png

The default size of the image is only 57 by 57 pixels but you can use sizes up to 114 pixels.

You can specify an icon for you site or specific pages with a special link in the header that tells the mobile device where to find it.

Android devices also work when you specify an image with this tag.

It is also possible to specify different icons for different devices like the iPad or iPhone 4 that use slightly higer res files 72 by 72 and 114 by 114 pixels respectively.

I composed our apple touch icon using drawing tools in Microsoft Word, the WordArt tool and amazingly my iPod did not reject it. I traced the logo with a free program called InkScape and sized the final image with Paint.net. Size did not seem to matter but it has to be square, I was using an icon of 196 by 196 pixels just fine but I settled on 114 by 114.

Mobile Style Sheets Links

You will probably want at least 3 style sheets.

A style sheet for smart devices with touch pads

Devices like iPhones and Android Phones and small tablet devices. These are the primary target for our mobile page as discussed above this is the one you will work on most because it does most of the work. All your navigation elements will have their style here. It should have media=screen.

Handheld CSS for not very smart devices like old web enabled phones

These are not our primary target user but they can still get our hours and contact numbers simple things. And it should not take much effort. These devices usually identify themselves as handheld and load for themselves only a Stylesheet with the media attribute “handheld”.

Finally a Mobile Style Sheet for cranky old Windows Phone

The IE browser in windows phone will always react badly to some things. Often you can counteract this by repeating the style for that thing in the IE Mobile only Stylesheet.

You specify a style sheet that only IE mobile can read with a conditional comment surrounding the style sheet tag. This one is read by all versions of IE Mobile but you can specify a version if you need to. Just put the version number after the if iemobile like:

A simple helpful JavaScript to scroll your page up

This little script placed at the bottom of your header makes your page scroll up and hide the address bar giving more room to your content and a neater look. Place this at the bottom of the header. If your page is loading slowly I have found it does not always work.

If you are wondering what the //

Источник