Старый 01.05.2015, 15:58   #11
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Smile

На данный момент работаю с заказами с Серча. На данный момент адаптировал уже порядка 18 сайтов.

А вот последние полезные наработки:

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

PHP код:
@media screen and (max-width700px) {
img {max-width96% !importantheightauto !important;}
iframetextareainputbuttonsubmitvideoobjectembed {max-width99% !important;}
tablespandivins {max-width100% !important;}
}
@
media screen and (max-width500px) {
bodytbody {
-
moz-hyphensauto;
-
webkit-hyphensauto;
-
ms-hyphensauto;
hyphensauto;}
}
@
media screen and (max-width400px) {
td {word-break: break-all;}

D.iK.iJ вне форума   Ответить с цитированием
Старый 23.12.2015, 08:46   #13
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

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


С адаптивной рекламой Гугла все довольно просто. Там есть специальные блоки, я только меняю обычно 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,
D.iK.iJ вне форума   Ответить с цитированием
Старый 21.01.2016, 20:38   #14
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

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

D.iK.iJ вне форума   Ответить с цитированием
Старый 18.02.2016, 19:23   #15
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Сегодня переделывал сайт 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 вне форума   Ответить с цитированием
Старый 19.02.2016, 12:21   #16
Мастер
 
Аватар для Dohlaja_Sova
 
Регистрация: 29.05.2007
Сообщений: 525
Вес репутации: 160
Dohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордитсяDohlaja_Sova - за этого человека можно гордится
По умолчанию

интересно, если в медию сразу *{display: none} воткнуть, удобство будет 146%?-)
Dohlaja_Sova вне форума   Ответить с цитированием
Старый 19.02.2016, 13:17   #17
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Smile

Цитата:
Сообщение от Dohlaja_Sova Посмотреть сообщение
интересно, если в медию сразу *{display: none} воткнуть, удобство будет 146%?-)
Кстати, будет. Гугл у страницы с ошибкой 500 тоже показывает 100 из 100 удобства для пользователя

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

Ну а потом все блоки и фрейм просмотрщика версии для печати растянул на 100% по ширине экрана. Удобно вполне. Да и лучше, чем убирать функционал.
D.iK.iJ вне форума   Ответить с цитированием
Старый 23.02.2016, 23:39   #18
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Довольно интересная статья: 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 (со скруглениями).

Две - так как я очень ленивый, а проверять просто негде.
D.iK.iJ вне форума   Ответить с цитированием
Старый 01.03.2016, 00:35   #19
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Сделал тут простую кнопку переключения на полную версию сайта для адаптивного дизайна:

В Хедер, вместо meta name=viewport:
Цитата:
<? if (isset($_COOKIE['mobile'])) { ?><meta name=viewport content="width=device-width, initial-scale=1"><? } else { ?><meta name=viewport content="width=1024, initial-scale=0.1"><? } ?>

Сама кнопка:
Цитата:
<? if (isset($_COOKIE['mobile']) and $_COOKIE['mobile']=="no") { ?><a href="" onclick="SetCookie('mobile=yes', 0);">На обычную версию</a><? }else{ ?> <a href="" onclick="SetCookie('mobile=no', 30);">На мобильную версию</a><? } ?>
<script>
//Ставим Куки
function SetCookie(id, days){
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+"; path=/; expires="+ws.toGMTString();
}
</script>
Куки на 30 дней, страница перегружается по скрипту. Работает, проверил.
На здоровье

Если кому-то интересны технические моменты, то мы меняем width=device-width на width=1024, делая сайт "шире" для мобильного устройства. Также, я изменил начальный масштаб загрузки страницы с initial-scale=1 на initial-scale=0.1 - так работа очевиднее.
D.iK.iJ вне форума   Ответить с цитированием
Старый 06.03.2016, 18:26   #20
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Сегодня у нас интересная тема!
Как сделать таблицу адаптивной и не сойти с ума

В общем, адаптация под "резиновую верстку" табличного сайта часто выглядит примерно вот так. Особенно, если нет легкого доступа к самой таблице.



У меня есть полная статья на эту тему, но давайте тут просто приведу список полезностей по пунктам:

1) td {hyphens: auto;} - корректный перенос слов в таблице. Жаль, не во всех браузерах.

2) word-break: break-all; - принудительно разбиваем строки и слова в таблице. Не очень красиво, но работает.

3) <WBR> сами расставляем места переносов.

4) Заключаем таблицу в DIV c фиксированной шириной и overflow: auto. Это включит прокрутку по горизонтали.

5) Иногда достаточно уменьшить отступы в ячейках.

6) td {display: inline-block !important; width: 100% !important;} - а этот способ дошел до меня совсем недавно. Можно сделать столбцы таблицы блоками или инлайн-блоками. Это настолько легко и круто, что даже слов нет!

Любые карточки товаров легко складываются друг под друга, а ячейки переносятся. И все это - без физической разбивки таблицы на 2 части (у таблиц вообще много глюков с float: left в разных браузерах).

Да, подход применим и к строкам (tr). В принципе, стилями таблицу можно даже пересобрать заново.
D.iK.iJ вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация сайта koctik Общие вопросы оптимизации 5 13.07.2013 15:23
SEO оптимизация сайта birja Общие вопросы оптимизации 2 13.04.2012 10:54
Задачка... 3 строчки на JS. Хелп! MonAmur Разработка и сопровождение сайтов 3 08.10.2009 14:50
Оптимизация сайта sunplant Общие вопросы оптимизации 9 25.11.2008 09:15
оптимизация сайта :( pha Яндекс 1 10.12.2007 15:54


Часовой пояс GMT +3, время: 13:42.