Микроблоги Знакомства Люди Поиск Фото Музыка Регистрация Доброй ночи, Гость Вход


forumroditeley.ru


Социальная сеть родителей, для пап и мам, живущий
приглашает общаться будущих мам, беременных и родивших детей,
разведенных и одиноких родителей и всех тех, кто хочет знакомиться,
переживать и помогать на форуме родителей другим.
Мужской, женский и детский большой сайт - это полезные новости,
общение сейчас, интересные разговоры о наших детях.
В мире много-много порталов, но именно мы делаем все,
чтобы Вам было у нас лучше и комфортно без регистрации читать.

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

В этой теме отвечено 3 раз и проглядели 5841 раза!

 
Начать новую тему   Ответить на тему    forumroditeley.ru -> администратор -> вебмастеру

Просмотров темы Как настроить свой сайт для мобильного или адаптивного показа: 5841
Общая оценка: 5.00 :: Минимальная оценка: 5 :: Максимальная оценка: 5 :: Всего оценило: 1
Понравилось? Оцените по пятибальной шкале!
Выберите оценку: 

Или обязательно сохраните в браузере в закладки, если тема нужна Вам!
Автор Сообщение
администратор
администратор
Не онлайн
Зарегистрирован: 2011-09-27
Рейтинг:
живет тут 2970 день
Сообщ.: 8859

Темы: 4787
Откуда Вы: Новая Усмань, Воронежская обл
Страна: russia.gif
Сообщение 25-Ноя-15 18:59      #1  [дать ссылку]    
Сейчас у каждого второго пользователя телефона в руках смартфон с выходом в инет через различные способы в интернет: фай-вай, GPRS и прочее.. Многие сидят постоянно в социальных сетях, некоторые серфят через поиск нужной информации что то найти для себя или близких, и большинство из этих людей обязательно попадают на форумы, блоги, новостные ресурсы и другие сайты. В конечном результате у любого владельца сайта его сайт заточен именно на полноценный интернет - это значит, к нему заходят через ноутбуки и станционарные компьютеры. Всем здравствуйте, уважаемые читатели этого подраздела вебмастеру. Сегодня поговорим о том, как ваш сайт переделать для мобильных устройств, а именно, айпадов, айподов, смартфонов и прочих маленьких гаджетов, столь так любимые в народе из-за компактности.

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

Чтобы как все это сделать и впихнуть в размер смартфона или планшета, нужно читать больше информации, перейдя по этим ссылкам:

Сайты для мобильных устройств. Совету вебмастеру от яндекса
Тут вам покажут, что нужно поставить в структуру сайта вот такой мета тег:
Код:
<meta name="viewport" content="width=device-width, initial-scale=1">


Давайте не заходя по ссылке тут почитаем...

Цитата:
Поисковые системы улучшают выдачу результатов поиска для пользователей мобильных устройств (смартфонов, планшетов). Таким пользователям вероятнее всего будет показан сайт с адаптивным дизайном, или мобильная версия сайта. В Поиске Яндекса ссылки могут выделяться специальной меткой «Мобильная версия».

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

Размещайте контент вашего сайта таким образом, чтобы он был максимально виден на экране мобильного устройства.

Для сайтов с адаптивным дизайном используйте мета-тег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML тегов.

На страницах сайта, которые имеют мобильную версию, укажите ее URL. Например, с помощью элемента link:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html"/>

Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей — эти технологии могут не поддерживаться на мобильных устройствах.
Совет. Например, пользователи не смогут просмотреть интерактивную часть сайта или видеоролик, встроенные на Flash. Поэтому рекомендуем встраивать контент с помощью HTML5 или отказаться от тяжелых и сложных интерактивных элементов.
Содержимое страниц не должно выходить за рамки экрана по горизонтали.
Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.


Даю пояснение что такое адаптивный дизайн сайта:
Цитата:
Любой сайт подстраивается под разрешение и размер мобильных устройств (телефон, планшет) по любому адресу на сайте, будь это тема, главная сайта или любой раздел


А вот что такое мобильная версия сайта:
Цитата:
Для просмотра с мобильных устройств сайт доступен по отдельному URL: например, m.site.com. Не по обычному протоколу интернета в виде http://


Также гугл помогает разобраться вебмастеру в этой проблеме вот тут. Давайте почитаем вот что там пишут:
Рекомендации

Цитата:
На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания: width=device-width, initial-scale=1.

Код:
<meta name=viewport content="width=device-width, initial-scale=1">



Сразу вам рекомендую поставить мета тег и код в структуре вашего сайта. Откройте файл сайта, где отображаются на главной мета теги (index.php, index.html, overall_header.php) и после всех тегов ставьте вот эти 2:
Код:
<meta name="viewport" content="width=device-width, initial-scale=1">


Код:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html"/>

где в http://m.site.com/page.html поменяйте вот так http://m.ВАШДОМЕН/

В случае захода на ваш сайт через мобильное устройство этот тег предложит посетителю мобильную версию домена.

Пример на структуре этого форума, скриншот:
pic




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

Для начала яндекс владельцу сайта сам предлагает посмотреть как выглядит его сайт на экране мобильного телефона:
Заходим вот сюда https://beta.webmaster.yandex.ru/ , затем прыгаем слева в колонке на Инструменты >>> Проверка мобильных страниц

pic


Есть другие проверки сервисы:
1. http://ipadpeek.com/
Забиваете свой адрес, и крутите эмулятор смартфона как в руках, прокручиваете верх и вбок, Все повторяется как в руках обычного пользователя

2. http://quirktools.com/
Вставляете свой адрес сайта и выбираете тип, а потом марку телефона. Круто!

3. http://www.mobilephoneemulator.com/
Эмулятор, позволяющий увидеть свой сайт на гаджетах, включая iPhone, HTC, LG, BlackBerry и Samsung.

4. http://ami.responsivedesign.is/
Отображает ваш сайт в мониторе, в телефоне, в планшете и смартфоне.

5. http://deviceponsive.com/
Устройства и доступные разрешения экранов.
Macbook — 1280 x 800
iPad портрет — 768 x 1024
iPad портрет — 1024 x 768
Kindle портрет — 600 x 1024
Kindle альбомная ориентация — 1024 x 600
iPhone портрет — 320 x 480
iPhone альбомная ориентация — 480 x 320
Galaxy портрет — 240 x 320
Galaxy альбомная ориентация — 320 x 240

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

Share on APSense Поделиться в LiveJournal Поделиться в Liveinternet Blogger.com Поделиться на Tumblr Поделиться в memori Добавить в закладки i.ua Добавить в закладки в folkd Добавить в закладки juwit Добавить в imgfave Пост! Добавить в xerpi



Мануал - как поделиться с друзьями в сетях - откроется в новой вкладке
staiki
новичок
Не онлайн
Зарегистрирован: 2015-12-13
Рейтинг:
живет тут 1432 день
Сообщ.: 7

Темы: Нет
Откуда Вы: Киев
Страна: ukraine.gif
Сообщение 14-Дек-15 00:09      #2  [дать ссылку]    
По ссылкам определяет не правильно. Мой сайт например. У меня прикручен отдельно мобильный шаблон и когда заход идёт с мобильного телефона автоматом открывает мобильную версию. По ссылкам увы..
Вернуться к началу

Share on APSense Поделиться в LiveJournal Поделиться в Liveinternet Blogger.com Поделиться на Tumblr Поделиться в memori Добавить в закладки i.ua Добавить в закладки в folkd Добавить в закладки juwit Добавить в imgfave Пост! Добавить в xerpi



Мануал - как поделиться с друзьями в сетях - откроется в новой вкладке
администратор
администратор
Не онлайн
Зарегистрирован: 2011-09-27
Рейтинг:
живет тут 2970 день
Сообщ.: 8859

Темы: 4787
Откуда Вы: Новая Усмань, Воронежская обл
Страна: russia.gif
Сообщение 14-Дек-15 00:13      #3  [дать ссылку]    
staiki писал(а):
По ссылкам определяет не правильно. Мой сайт например. У меня прикручен отдельно мобильный шаблон и когда заход идёт с мобильного телефона автоматом открывает мобильную версию. По ссылкам увы..

К сожалению, этот движок на форуме не позволяет быть мобильным. Пришлось ставить мета тег и тестировал с планшетов и с телефонов.
Вернуться к началу

Share on APSense Поделиться в LiveJournal Поделиться в Liveinternet Blogger.com Поделиться на Tumblr Поделиться в memori Добавить в закладки i.ua Добавить в закладки в folkd Добавить в закладки juwit Добавить в imgfave Пост! Добавить в xerpi



Мануал - как поделиться с друзьями в сетях - откроется в новой вкладке
staiki
новичок
Не онлайн
Зарегистрирован: 2015-12-13
Рейтинг:
живет тут 1432 день
Сообщ.: 7

Темы: Нет
Откуда Вы: Киев
Страна: ukraine.gif
Сообщение 14-Дек-15 00:17      #4  [дать ссылку]    
администратор
Я не за ваш сайт говорил - за свой. У меня на phpbb3 прикручен отдельно мобильный шаблон, который автоматом вычисляет,что юзер зашел с мобильного и открывает ему мобильный шаблон. Я просто проверил по ссылкам выше введя свой сайт - там не открыло мобильный шаблон а значит те сайты могут дать ложную инфу.
Вернуться к началу

Share on APSense Поделиться в LiveJournal Поделиться в Liveinternet Blogger.com Поделиться на Tumblr Поделиться в memori Добавить в закладки i.ua Добавить в закладки в folkd Добавить в закладки juwit Добавить в imgfave Пост! Добавить в xerpi



Мануал - как поделиться с друзьями в сетях - откроется в новой вкладке
Заголовок новой темы
Форум для новой темы
 
Страница 1 из 1
Показать сообщения:   
Как настроить свой сайт для мобильного или адаптивного показа
Начать новую тему   Ответить на тему    forumroditeley.ru -> администратор -> вебмастеру Часовой пояс: GMT + 3

 

Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы можете скачивать файлы
Вход
Имя:    Пароль:      Автоматически входить при каждом посещении    


Подписка RSS

Follow

Наши сервисы

На правах рекламы

Анонимное голосование

Понравилось?
Мы в сетях:
                         
Все материалы сайта представлены только для ознакомления. При копировании материала ссылка на forumroditeley.ru обязательна!

sitemap     карта форума | Статистика визитов поисковых ботов | Выдача в поисковиках | слова | Новости науки от яндекса

Написать админу

Нравится
Яндекс.Метрика
Powered by phpBB © 2001, 2011 phpBB Group форум общения родителей ©27.09.2011-2019