Кнопка полная версия сайта как сделать

Добавил пользователь Alex
Обновлено: 19.09.2024

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

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

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

Зачем? Он представляется "Большим Братом" и все. А дальше браузерный интерпретатор обрабатывает код страницы и подгоняет под свои размеры

Меня раньше устраивал хостинг ISP, теперь совсем не устраивает.
И да, SEO и продвижением сайтов не занимаюсь, но душевный СЕО форум рекомендовать могу.

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

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

P.S. Или я что-то не так делаю. Но у меня эта галочка на сайтах с адаптивной версткой ни на что не влияет

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

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

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

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

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

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

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

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

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

Я полагаю она подстраивается под разрешение экрана bootstrap.css?
Я не программист, но если бы мне нужно было сделать подобное, я бы наверное создал еще один .css файл, в котором поубирал бы вот это
Т.е. зафиксировал бы просто шаблон под одно из разрешений экрана, а потом прописал бы условие, какой .css подключать в зависимости от переменной сессии. По умолчанию грузился бы резиновый шаблон, а по клику грузился бы фиксированный шаблон.

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

P.S. Или я что-то не так делаю. Но у меня эта галочка на сайтах с адаптивной версткой ни на что не влияет

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

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

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

Вот к примеру, в зависимости от размера экрана, меняется отступ.

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

Вот про эту галочку речь

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

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

ЗЫ На своем сайте, ничего не меняется. Тоже адаптивная верстка.

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

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

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

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

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

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

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

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

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

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

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

Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.

Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.

Как сделать кнопку в HTML?

Кнопки для сайта HTML создаются одним из двух способов:

1. С помощью тега input . Синтаксис такой команды выглядит следующим образом:

2. С помощью тега button :

В результате получаются две одинаковые кнопки:

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

Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.

Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button .

Виды кнопок html

1. Кнопка-ссылка HTML

Выглядит это следующим образом:

2. Кнопка Submit

Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:

3. Кнопка Reset

Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:

4. HTML кнопка с картинкой

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

Кнопка с картинкой и текстом:

Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.

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

А можно поступить еще проще — воспользоваться готовыми виджетами. Мультикнопка будет уместна практически в любых целях — от отправки заявок до покупки билетов и перехода на заданные страницы. Какой способ добавления кнопки на сайт выберите вы?

3 способа добавить HTML-кнопку на сайт

Рассмотрим, как добавить HTML-кнопку на сайт разными способами:

используя тег& ; ;
используя тег& ; ;
устанавливая ссылку (тег& ; ) и с помощью CSS-свойств.

Добавление HTML-кнопки на сайт с помощью тега

Различают две разновидности кнопок, для создания которых используется тег& ;button. Это элемент интерфейса для очистки полей форм — reset, а также кнопка, функционал которой определяет соответствующий скрипт.

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

С помощью элемента интерфейса& ; или тега& ; можно осуществлять отправку форм HTML. В этом случае нужна кнопка типа& ;submit, которая включена в тег HTML-кода формы& ;

Собирайте до 47 заявок
в день с сайта уже через 9 минут

Бесплатно установим конверсионные виджеты на сайт
и дадим бесплатный доступ на 7 дней. Заявки гарантируем :)

Собирайте до 47 заявок в день
с сайта, уже через 9 минут

Установите за пару кликов и протестируйте на своём
сайте бесплатно в течение 7 дней. Заявки гарантируем :)

Инструмент помогает создать кнопку для сайта на HTML и CSS без знаний. Для создания потребуется только выбрать цвет и размер элементов. После всех настроек вы получаете чистый код для установки.

промокод BC35-3573-8360-EFAB

Быстрый выход в ТОП!

Кнопка (англ. button) — элемент интерфейса, является метафорой кнопки в технике и, соответственно, изображается схожей с ней и выполняет аналогичные функции. При нажатии на неё происходит программно связанное с этим нажатием действие либо событие.

Основной особенностью является простота настроек кнопок и удобство в редактировании.

Инструкция настройки

При создание данного инструмента, я максимально старался упростить систему настройки кнопки. Для тех, кто не разберётся, что нужно делать объяснения:

Текст кнопки - введите текст, который будет отображаться на кнопке.
Ссылка кнопки - укажите страницу, которая будет открываться при нажатии.
Цвета кнопки - блок настройки цветов. Тут вы сможете настроить цвета кнопки, текста и обводки.
Настройка размеров - данный блок необходим для настройки размеров кнопки и размеров шрифта.
Выравнивание кнопки - тут вы сможете выравнять кнопку по разным сторонам сайта.
Открытие на новой вкладке - добавить возможность открывать по клику новую страницу.
Цвет при наведение - настройка позволяет сделать эффект при наведении мыши на кнопку.
Цвет текста при наведение - позволяет изменить цвет текста при наведении.

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

Режим чтения

— это режим просмотра страницы, при котором на экране отображаются только текст и картинки (видео) к нему. Остальные элементы страницы (баннеры, элементы управления сайтом или кнопки социальных сетей) будут скрыты.

Перейти в режим чтения

Нажмите в Умной строке значок .

Ограничение. Если в меню нет строки Режим чтения , а в Умной строке — значка, режим чтения нельзя включить для этой страницы.

Нажмите в Умной строке значок .

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

Переход в начало страницы

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

Чтобы скрыть кнопку перехода:

Перенос текста

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

Масштаб текста

Вы можете сделать шрифт на странице крупнее или мельче:

Если включена опция переноса текста, ползунок будет неактивен. Выключите ее, чтобы изменить масштаб текста.

Примечание. Некоторые сайты запрещают браузерам менять масштаб текста. Чтобы снять этот запрет, в разделе Масштаб и перенос текста включите опцию Игнорировать запросы сайтов на запрет масштабирования .

Полная версия сайта

По умолчанию в браузере отображаются мобильные версии сайтов. Чтобы открыть полную версию:

Чтобы вернуться к мобильной версии сайта, нажмите Мобильная версия .

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

Если вы не нашли информацию в Справке или у вас возникает проблема в работе Яндекс.Браузера, опишите все свои действия по шагам. Если возможно, сделайте скриншот. Это поможет специалистам службы поддержки быстрее разобраться в ситуации.

Примечание. Для решения проблем в работе сервисов Яндекса обращайтесь в службу поддержки этих сервисов:

О проблемах Яндекс.Браузера на компьютере пишите прямо из браузера: → Дополнительно → Сообщить о проблеме или через форму.

Если вопрос касается главной страницы Яндекса (изменить тему оформления, настроить блоки главной страницы или иконки сервисов, найти Яндекс.Деньги и т. д.), пишите через форму. Выберите опцию Вопрос о главной странице Яндекса .

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

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

Режим чтения

Перейти в режим чтения

Нажмите в Умной строке значок .