Форум SAPE.RU
Страница 2 из 8 1 2 3456 Last »
Показывать 40 сообщений этой темы на одной странице

Форум SAPE.RU (http://forum.sape.ru/index.php)
-   Разработка и сопровождение сайтов (http://forum.sape.ru/forumdisplay.php?f=29)
-   -   Оптимизация сайта для планшетов и телефонов - в 2 строчки (http://forum.sape.ru/showthread.php?t=94083)

D.iK.iJ 01.05.2015 15:58
На данный момент работаю с заказами с Серча. На данный момент адаптировал уже порядка 18 сайтов.

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

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

PHP код:
@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;}
} 

D.iK.iJ 25.08.2015 21:45
Да, если что, принимаю заказы на адаптацию сайтов.

Пишите, всегда можем договориться о скидках :)

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


С адаптивной рекламой Гугла все довольно просто. Там есть специальные блоки, я только меняю обычно 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
Я просто обязан оставить это тут:

https://media.giphy.com/media/3oFyD3...b8li/giphy.gif

D.iK.iJ 18.02.2016 19:23
Сегодня переделывал сайт 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) { Тут код }

Dohlaja_Sova 19.02.2016 12:21
интересно, если в медию сразу *{display: none} воткнуть, удобство будет 146%?-)

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

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

Ну а потом все блоки и фрейм просмотрщика версии для печати растянул на 100% по ширине экрана. Удобно вполне. Да и лучше, чем убирать функционал.

D.iK.iJ 23.02.2016 23:39
Довольно интересная статья: 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
Сделал тут простую кнопку переключения на полную версию сайта для адаптивного дизайна:

В Хедер, вместо 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
Сегодня у нас интересная тема!
Как сделать таблицу адаптивной и не сойти с ума

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

https://pp.vk.me/c543103/v543103411/...wmxXGiGNGY.jpg

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

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). В принципе, стилями таблицу можно даже пересобрать заново.


Часовой пояс GMT +3, время: 09:18.
Страница 2 из 8 1 2 3456 Last »
Показывать 40 сообщений этой темы на одной странице

Работает на vBulletin® версия 3.8.7.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot
SAPE.RU — система купли-продажи ссылок с главных и внутренних страниц сайтов.