Форум Сайтостроение Веб-строительство

Оптимизация сайта для планшетов и телефонов - 2

123456 7
D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
16025

Так как сайт пишет, что прошлая тема - слишком старая, я хочу продолжить тут.

Для начала, напомню алгоритм для самостоятельной адаптации сайта:

Метатег наличия мобильной версии:

<meta name=viewport content="width=device-width, initial-scale=1">

Набор стилей, с которых я обычно начинаю адаптацию. Для экранов 700px и меньше:

@media screen and (max-width: 700px) {
img {max-width: 96% !important; height: auto !important;}
iframe, textarea, input, button, submit, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 500px) {
body, tbody {
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;}
}
@media screen and (max-width: 400px) {
td {word-break: break-all;}
}

Кеширование на стороне браузера. Нашел в интернете:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>

<ifModule mod_headers.c>
<filesMatch "\.(ico!pdf!flv!jpg!jpeg!png!gif!swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(css!js!txt!html!htm)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
<filesMatch "\.(php!xml)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"
</filesMatch>
</ifModule>


---------- Добавлено 23.12.2015 в 11:54 ----------

Я что-то вспомнил, что не рассказал про адаптацию рекламы от Гугла и Яндекса для мобильных устройств.

С адаптивной рекламой Гугла все довольно просто. Там есть специальные блоки, я только меняю обычно data-ad-format="auto" на data-ad-format="rectangle". Это позволяет показывать только прямоугольные и квадратные блоки, занимая под статьей больше места.

Еще можно показывать, например, большой блок рекламы для десктопа и адапривный - для меньших экранов:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Дикий 3 -->
<script>
if(document.getElementsByTagName("body")[0].offsetWidth>=900) {
document.write('<ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-435345345345345" data-ad-slot="345345345345"></ins>');
}else{
document.write('<ins class="adsbygoogle" style="display:block; width: 90%;" data-ad-client="ca-pub-45645645645234" data-ad-slot="234234234234234" data-ad-format="rectangle"></ins>');
}
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

Для этого нжно добавить к div: style="margin-left: auto; margin-right: auto; display: inline-block;"

Как же изменить количество объявлений в блоке для подстройки под адаптивный дизайна?

Для асинхронного кода после (function(w, d, n, s, t) { нужно вставить скрипт определения ширины экрана: var limmw=document.getElementsByTagName("body")[0].offsetWidth; if (limmw>=1020) {var limm="3";} else {var limm="2";} if (limmw<=820) {limm="1";} Ну и заменить limit на limit: limm,

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#1

Я просто обязан оставить это тут

Andron_buton:
Адаптивный дизайн

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#2

Ответ от техподдержки Гугла по поводу адаптивных блоков (тот код, что выше):

/ru/forum/comment/14280879

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#3

Сегодня переделывал сайт pleervox.ru и получил у Гугла 100 / 100 Удобство для пользователей. :)

Даже слайдер и просмотрщик фотографий переделан под мобильные устройства.

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

#cboxTopLeft {display: none !important;}
#cboxTopCenter {display: none !important;
#cboxTopRight {display: none !important;}
#cboxMiddleLeft {display: none !important;}
#cboxMiddleRight {display: none !important;}
#cboxBottomLeft {display: none !important;}
#cboxBottomCenter {display: none !important;}
#cboxBottomRight {display: none !important;}
#colorbox {width: 100% !important; min-width: 100% !important; left: 0px !important;}
#cboxWrapper {width: 100% !important; min-width: 100% !important;}
#cboxLoadedContent {width: 100% !important; min-width: 100% !important;}
#cboxContent {width: 100% !important; min-width: 100% !important;}
.cboxIframe {width: 100% !important; min-width: 100% !important;}

Код ставится, например, в @media screen and (max-width: 700px) { Тут код }

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#4

Довольно интересная статья: https://habrahabr.ru/post/277753/

"Начиная с 39 версии хрома для Android Lollipop была внедрена возможность менять цвет интерфейса браузера веб-разработчиками.

Сделать это просто, нужно в <head> добавить новый мета-тег:"

<meta name="theme-color" content="#9CC2CE">

Ну и "Google также рекомендует использовать иконку высокого качества, чтобы это выглядело еще лучше:"

<link rel="icon" sizes="192x192" href="nice-highres.png">

Кстати, для добавления иконок в Айфонах я когда-то сделал у себя на сайтах файл browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile>
<square70x70logo src="apple-touch-icon.png"/>
<square150x150logo src="apple-touch-icon.png"/>
<wide310x150logo src="apple-touch-icon.png"/>
<square310x310logo src="apple-touch-icon.png"/>
<TileColor>#666666</TileColor>
</tile>
</msapplication>
</browserconfig>

И две картинки: apple-touch-icon.png

и apple-touch-icon-precomposed.png (со скруглениями).

Две - так как я очень ленивый, а проверять просто негде.

K
На сайте с 30.09.2015
Offline
53
ksp
#5

DiKiJ, по поводу иконок под iPhone . Смотрите по логам ошибок 404 ( MySite.error.log ). Получите полный список размеров иконок, которые недополучают ваши пользователи.

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#6
ksp:
DiKiJ, по поводу иконок под iPhone . Смотрите по логам ошибок 404 ( MySite.error.log ). Получите полный список размеров иконок, которые недополучают ваши пользователи.

Спасибо. Но дело в том, что у самого сайта Эппл только 1 иконка используется. Не помню точно, но пикселей на 150 примерно.

Да и формат у них постоянно меняется. Не думаю, что буду городить для своих сайтоа что-то, кроме apple-touch-icon.png

Виндоус 10 у меня эту иконку отлично подхватила, кстати, когда добавил на сайт <link rel="icon" sizes="144x144" href="/apple-touch-icon.png">

Андроид 4.1.2 тоже использует иконку, но она немного не влазит. Вот и думаю - добавить может 60x60 картинку или просто старую пересохранить.

В логах 404 при таком коде у меня пусто.

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#7

Не знаю, все ли это знают, но на мобильном сайте на обязательно подменять карту от Яндекса картинкой или скрывать виджеты от Контакта. Их ширина отлично подстраивается под размер окна, если указать ее как auto. Только желательно еще и в блоке DIV указать ширину 100%.

Получится примерно так:

VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "800"}, -436436346);

Но, к сожалению, часто есть доступ к CSS, а доступа к странице просто нет. Ну а по ID размер виджета у меня упорно не хочет меняться 😒.

Помогло очень простое обращение к тегу yamps, который на сайте был засунут в блок с ID post. Получилось: #post > ymaps { max-width: 100% !important; }

Буду рад, если у кого-то есть рецепт изменить и виджет ВК только посредством CSS. ☝

jpg 149627.jpg
MM
На сайте с 14.07.2014
Offline
58
MinMart
#8

Можно вопрос!? Почему именно так написали мета тег?

<link rel="icon" sizes="144x144" href="/apple-touch-icon.png">

а не так: <link rel="apple-touch-icon" href="/apple-touch-icon/ru-76x76.png" sizes="76x76">

Английская обувь (https://english-shoes.ru) - это индивидуальность которая всегда в моде!
qilly
На сайте с 28.03.2008
Offline
382
qilly
#9

Народ, а кто что скажет? Лучше делать адаптивную верстку или же отдельный мобильный шаблон с фильтром по user-agent? Во втором случае удобно, что можно поставить рекламные блоки для мобильных, а на обычной версии оставить блоки для десктопа...

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

D.iK.iJ
На сайте с 26.05.2013
Offline
224
D.iK.iJ
#10
qilly:
Мне больше нравится второй вариант, но тогда получается что в рамках одного домена будет различный HTML выдаваться - не чревато ли будет для ПС...?

Есть еще вариант по этому же фильтру менять шаблон на мобильный.

Лично я для себя решил делать только адаптивную верстку (она же - отзывчивый дизайн). Мне нравится, что можно не урезать функционал сайта, а повернув телефон или планшет "боком" - получить широкую полную версию.

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

С переадресацией пользователей тоже нужно сделать все корректно. Одно дело телефоны, а другое - современные лопаты на Андроиде, например. У моего планшета экран 11 дюймов и Винда десятая кроме Андроида. Мобильным назвать сложно. :)

123456 7

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий