Перейти к содержимому

MOAB

- - - - -

Адаптивная верска и полная версия на мобильных устройствах


  • Войдите, чтобы ответить
Сообщений в теме: 18

#1 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 3 633 сообщений
2 237
  • ИзСанкт-Петербурга

Отправлено 14 Октябрь 2016 - 12:10

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

Как реализовать его каприз?
Я так понимаю, что браузеру нужно как-то менять (передавать) логические размеры экрана?

#2 MiXa

MiXa

    Ненавижу белых мух и твердую воду

  • Основатель
  • PipPipPipPipPip
  • 1 575 сообщений
1 668
  • ИзМосква

Отправлено 14 Октябрь 2016 - 13:01

Просмотр сообщенияprotector сказал:

браузеру нужно как-то менять (передавать) логические размеры экрана?
Зачем? Он представляется "Большим Братом" и все. А дальше браузерный интерпретатор обрабатывает код страницы и подгоняет под свои размеры
Меня раньше устраивал хостинг ISP, теперь совсем не устраивает.
И да, SEO и продвижением сайтов не занимаюсь, но душевный СЕО форум рекомендовать могу.

#3 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 14 Октябрь 2016 - 13:34

Насколько я это понимаю - никак. Т.е. только какими-нибудь костылями. Например, сделать внизу ссылку - "полная версия", и, при нажатии на нее что-то делать. Принудительно установить размер основного блока большим, или не грузить какие-то мобильные стили, и.т.п.
Это минус адаптивной верстки :)

P.S. Или я что-то не так делаю. Но у меня эта галочка на сайтах с адаптивной версткой ни на что не влияет :)
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.

#4 GogA

GogA

    Продвинутый

  • Основатель
  • PipPipPip
  • 366 сообщений
433
  • ИзMoscow

Отправлено 14 Октябрь 2016 - 15:01

Я делаю так. Внизу страницы ссылка:

<a href="/" class="changemobile" onclick="
(function ($) {
	$(document).ready(function() {
		$.cookie('ismobile', 1, { expires: 10*365, path: '/'});
	});
})(jQuery);
">Мобильная версия</a>

<a href="/" class="changemobile" onclick="
(function ($) {
	$(document).ready(function() {
		$.cookie('ismobile', 0, { expires: 10*365, path: '/'});
	});
})(jQuery);
">Полная версия</a>

При генерации страницы проверяется кука, далее добавляем класс к body

<body class="mobile">
<body class="nomobile">

остальное делает правильный css.

Можно по куке выводить разные файлы css, как будет удобнее.

#5 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 3 633 сообщений
2 237
  • ИзСанкт-Петербурга

TC Отправлено 14 Октябрь 2016 - 15:03

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

Но чувствую, много нужно править для реализации данной идеи.

Просмотр сообщенияGogA (14 Октябрь 2016 - 15:01) писал:

При генерации страницы проверяется кука, далее добавляем класс к body
<body class="mobile">
<body class="nomobile">

остальное делает правильный css.
Да, интересная идея.. В этом случае правок будет не очень много.

#6 GogA

GogA

    Продвинутый

  • Основатель
  • PipPipPip
  • 366 сообщений
433
  • ИзMoscow

Отправлено 14 Октябрь 2016 - 15:07

Просмотр сообщенияprotector (14 Октябрь 2016 - 15:03) писал:

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

Но чувствую, много нужно править для реализации данной идеи.


Да, интересная идея.. В этом случае правок будет не очень много.

Если куки нет, юзаем http://mobiledetect.net/ чтобы определить какую версию показывать в данный момент.

<?php
	global $msw_detect;
	if (!isset($_COOKIE['ismobile'])) {
		$ismobile = ($msw_detect->isMobile() == 1 || $msw_detect->isTablet() == 1);
	} else {
		$ismobile = $_COOKIE['ismobile'];
	}
?>

<body<?php
	echo $ismobile ? ' class="mobile"':' class="nomobile"';
?>>


#7 AdisPrint

AdisPrint

    Почетный

  • Активный участник
  • PipPipPipPipPip
  • 2 878 сообщений
2 127

Отправлено 14 Октябрь 2016 - 16:39

Просмотр сообщенияprotector сказал:

У сайта сделана адаптированная верстка.
Я полагаю она подстраивается под разрешение экрана bootstrap.css?
Я не программист, но если бы мне нужно было сделать подобное, я бы наверное создал еще один .css файл, в котором поубирал бы вот это
@media (min-width: 768px) and (max-width: 979px) {
Т.е. зафиксировал бы просто шаблон под одно из разрешений экрана, а потом прописал бы условие, какой .css подключать в зависимости от переменной сессии. По умолчанию грузился бы резиновый шаблон, а по клику грузился бы фиксированный шаблон.
СНПЧ, чернила, картриджи, фотобумага для принтеров и МФУ - AdisPrint.ru

#8 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 15 Октябрь 2016 - 10:21

Просмотр сообщенияprotector сказал:

браузера нажимает "показать полную версию сайта", то он хочет увидеть полную версию. Как реализовать его каприз?

Просмотр сообщенияKaSH сказал:

Насколько я это понимаю - никак.

Просмотр сообщенияKaSH сказал:

P.S. Или я что-то не так делаю. Но у меня эта галочка на сайтах с адаптивной версткой ни на что не влияет
Вы чего серьезно или шутите?
Та галочка изменят юзер-агента браузера. И все, разрешение экрана она не миняет. То есть если поставить галочку, то юзер агент поменяется на десктопную версию. . Взависимости какой юзер-агент, то сервер отдает определенные html и css файлы, если настроено. Или что-то другое, вариантов куча, что навешать не чекалку юзер-агента
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#9 AdisPrint

AdisPrint

    Почетный

  • Активный участник
  • PipPipPipPipPip
  • 2 878 сообщений
2 127

Отправлено 15 Октябрь 2016 - 13:03

Просмотр сообщенияValek сказал:

Та галочка изменят юзер-агента браузера. И все, разрешение экрана она не миняет. То есть если поставить галочку, то юзер агент поменяется на десктопную версию. . Взависимости какой юзер-агент, то сервер отдает определенные html и css файлы.
Я может чего не понимаю, речь шла о сайте с адаптивной версткой. Никаких там галочек меняющих юзер-агента нет. Контент меняется исключительно в зависимости от размера экрана. Я могу на десктопе растянуть или сжать окно браузера и контент будет подстраиваться под размер окна. Сайту тупо пофиг с десктопа человек зашел или со смартфона, если у смартфона размер экрана будет как у десктопа, то будут одинаковые версии сайта показаны.

Вот к примеру, в зависимости от размера экрана, меняется отступ.
@media (min-width: 1200px) {
  #header .form-search {
    margin-top: 20px;
  }
}
@media (max-width: 979px) {
  #header .form-search {
    margin-top: 3px;
  }
}

СНПЧ, чернила, картриджи, фотобумага для принтеров и МФУ - AdisPrint.ru

#10 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 15 Октябрь 2016 - 16:10

AdisPrint, имеется ввиду настройка в браузере на смартфонах.

Вот про эту галочку речь
Изображение

upd
фигасе какой большой скриншот с смарфона получается o_0
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#11 AdisPrint

AdisPrint

    Почетный

  • Активный участник
  • PipPipPipPipPip
  • 2 878 сообщений
2 127

Отправлено 15 Октябрь 2016 - 16:48

Ааааа!!! :lol: Понятно. Я этим почти не пользовался, но сдается мне пару раз чего-то все же менялось после нажатия.

ЗЫ На своем сайте, ничего не меняется. Тоже адаптивная верстка.
СНПЧ, чернила, картриджи, фотобумага для принтеров и МФУ - AdisPrint.ru

#12 KaSH

KaSH

    Инструктор по счастью

  • Основатель
  • PipPipPipPip
  • 1 355 сообщений
2 446
  • Изморя и с гор

Отправлено 16 Октябрь 2016 - 13:11

Просмотр сообщенияValek (15 Октябрь 2016 - 10:21) писал:

Вы чего серьезно или шутите?
Та галочка изменят юзер-агента браузера. И все, разрешение экрана она не меняет. То есть если поставить галочку, то юзер агент поменяется на десктопную версию. . Взависимости какой юзер-агент, то сервер отдает определенные html и css файлы, если настроено. Или что-то другое, вариантов куча, что навешать не чекалку юзер-агента
В том-то и фишка, что изменение юзер агента никоим образом не меняет ничего в адаптивной верстке, так как для адаптивной верстки верстки важен именно размер экрана.
Что касается того, что изменяется юзер-агент, мое отношение к этому - он не всегда определяется правильно. Пользователи могут тупить. И т.п. И, если требуется стабильно переключить одну версию сайта на другую, лучше дать такую возможность пользователю самостоятельно в виде кнопочки / ссылки и других дополнительных костылей.
Да, можно смотреть какой юзер агент, загружать разные стили. Хотя, опять же, только на мой взгляд, это связано с дополнительным гемором - нужно, по сути, иметь разные файлы таблиц стилей, что не слишком удобно в поддержке.
Если порыться в поиске, есть масса вариантов того, как народ извращается решая подобную задачу. Но в любом случае, нужно прилагать дополнительные усилия. И вот просто так вот с пол пинка это не решается. Поэтому - это и есть в моем понимании "костыли".

Но, то что я чего-то могу не знать и не понимать - это запросто. Возможно, на каких-то устройствах, в каких-то браузерах кнопка "показать полную версию" умеет не только менять юзер-агент, но и изменять размер экрана браузера. Что, в некоторой степени, было бы тоже достаточно логично. Не знаю об этом.
Но, если бы это было так - вот тогда это бы решало поставленную задачу автоматически. Было бы прекрасно.
Серьезные сайты размещаю на VPS, простые в SprintHost и в TimeWeb. Старые, более ненужные мне сайты я продаю на Телдери. Бухгалтерию и отчеты в налоговую за меня делает Эльба.

#13 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 16 Октябрь 2016 - 19:13

Просмотр сообщенияKaSH сказал:

в каких-то браузерах кнопка "показать полную версию" умеет не только менять юзер-агент, но и изменять размер экрана браузера. Что, в некоторой степени, было бы тоже достаточно логично.
Было бы не просто логично, а прям ваще шикарно. Это сколько бы времени сократилось бы на придумывания костылей и как бы упростилась в этом плане жизнь вебмастеров

Просмотр сообщенияKaSH сказал:

можно смотреть какой юзер агент, загружать разные стили

Просмотр сообщенияKaSH сказал:

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

Я просто растолковал, что имел ввиду ТС. Что за галочка, какую функцию она несет и как с ней взаимодействовать. Задачу можно решать разными способами это да
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#14 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 3 633 сообщений
2 237
  • ИзСанкт-Петербурга

TC Отправлено 17 Октябрь 2016 - 10:41

Просмотр сообщенияValek (15 Октябрь 2016 - 10:21) писал:

Вы чего серьезно или шутите?
Та галочка изменят юзер-агента браузера. И все, разрешение экрана она не миняет. То есть если поставить галочку, то юзер агент поменяется на десктопную версию. . Взависимости какой юзер-агент, то сервер отдает определенные html и css файлы, если настроено. Или что-то другое, вариантов куча, что навешать не чекалку юзер-агента

Просмотр сообщенияValek (15 Октябрь 2016 - 10:21) писал:

Та галочка изменят юзер-агента браузера. И все, разрешение экрана она не миняет. То есть если поставить галочку, то юзер агент поменяется на десктопную версию. . Взависимости какой юзер-агент, то сервер отдает определенные html и css файлы, если настроено. Или что-то другое, вариантов куча, что навешать не чекалку юзер-агента
Всё правильно. Но адаптивная верстка по умолчанию никак не привязана к юзер-агенту. И это в большинстве случаев правильно, так как экраны могут быть разные. Но нужен костыль... какое-то условие: типа смена юзер-агента + малое разрешение - показывать версию как для большого разрешения (меняется класс в body)..

У меня пока общий вопрос.. Пока не буду реализовывать.. может быть на следующем своем сайте с адаптивной версткой).

#15 AdisPrint

AdisPrint

    Почетный

  • Активный участник
  • PipPipPipPipPip
  • 2 878 сообщений
2 127

Отправлено 17 Октябрь 2016 - 13:58

protector, Тогда запилите еще одну типа мобильную версию сайта, которая на самом деле будет не мобильной, а наоборот полной для извращенцев которые ткнут эту кнопку. Только это изврат ИМХО.
СНПЧ, чернила, картриджи, фотобумага для принтеров и МФУ - AdisPrint.ru

#16 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 3 633 сообщений
2 237
  • ИзСанкт-Петербурга

TC Отправлено 17 Октябрь 2016 - 14:54

Просмотр сообщенияAdisPrint (17 Октябрь 2016 - 13:58) писал:

protector, Тогда запилите еще одну типа мобильную версию сайта, которая на самом деле будет не мобильной, а наоборот полной для извращенцев которые ткнут эту кнопку. Только это изврат ИМХО.
Выше вроде написали решение проблемы. Если юзер-агент поменялся и разрешение маленькое, то в боди меняем класс.

#17 GogA

GogA

    Продвинутый

  • Основатель
  • PipPipPip
  • 366 сообщений
433
  • ИзMoscow

Отправлено 21 Октябрь 2016 - 19:11

Просмотр сообщенияValek (15 Октябрь 2016 - 16:10) писал:

AdisPrint, имеется ввиду настройка в браузере на смартфонах.

Вот про эту галочку речь
Изображение

upd
фигасе какой большой скриншот с смарфона получается o_0

Не могу быть уверен, нет возможности потестить, логично можно предположить, что меняется эт-правило с какого-нибудь для мобилки handheld, на screen.

<style type="text/css">
  @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
  @import "/style/palm.css" handheld; /* Стиль для наладонные компьютеры и аналогичные им аппараты.  */
</style>

Соответственно, если прописаны разные css, то будут меняться. Но история опять не про адаптивную вёрстку.

#18 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 22 Октябрь 2016 - 18:33

Просмотр сообщенияGogA сказал:

Не могу быть уверен, нет возможности потестить, логично можно предположить, что меняется эт-правило с какого-нибудь для мобилки handheld, на screen.
Эт-правила не причем. Можно и @import или @media. Или так
<link media="handheld" rel="stylesheet" type="text/css" href="handheld.css" >
<link media="screen" rel="stylesheet" type="text/css" href="main.css" >

Но работать не будет. Современные смартфоны, планшеты определяются как носитель screen. Handheld это кпк, наладонные компы/коммуникаторы. Или как было еще принято PDA версия. Сейчас на верно ваще не используется.
Та галочка так же не меняет тип носителя.
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#19 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 456 сообщений
2 077
  • ИзРоссии :(

Отправлено 05 Декабрь 2016 - 05:42

АПну тему. Ибо тут на выходных себе волосы аж в подмышках вырвал.

Подгонял шаблон в мобильном браузере. Код чистый HTML, скриптов нет и нет чекалки как на фротенде так и на бэкэнде.
Свертал, залил, проверяю на мобильнеке в хроме. меню не схлопнулось, блоки в несколько колонок а не в одну, верстка от прототипа отличается, медиа-запросы не сработали. Опять в исходники полез искать ошибки, фаербагом ничего не хожу. с дестопного браузер все норм. Раз 5 все проверял в коде, перезаливал. Пока не открыл в мобильной опере и еще проверил на другом смартфоне в браузере хром. Верстка та которая и была задумана, то есть все ОК. И тогда полез искать на своем смартфоне почему медиа-запросы в хроме не срабатывают.

Полез в настройки хрома. И оп заметил, что стоит галочка "Полная версия". Убираю галочку и сайт отображается в мобильной версии, галочку ставлю и оп сайт в дестопной версии.
Это галочка РАБОТАЕТ. Еще не разобрался как именно. Или определенные медеи-запросы блокирует или как-то типа разрешение экрана меняет.

Просмотр сообщенияKaSH сказал:

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

Не ужели теперь не нужно будет лишний гемор выдумывать
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт



Похожие темы


Количество пользователей, читающих эту тему: 2

0 пользователей, 2 гостей, 0 анонимных



© 2021 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва
  • Top.Mail.Ru

Мы в соцсетях: twitter | вконтакте | facebook | livejournal