2013-09-30 3 views
1

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

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

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

Можно ли это сделать?

Спасибо!

+0

Have вы что-то пробовали? Если вы не показываете, что вы хотя бы пробовали, и что вы пробовали, это будет проголосовано за закрытие. Также (чистый интерес), почему вы ненавидите мобильные сайты? –

+0

Возможно, вы хотите использовать медиа-запросы? В противном случае, когда пользователь нажимает на вашу ссылку, переключает класс на элемент html/body, а затем добавляет все ваши мобильные css с помощью html.mobile – ediblecode

+0

Я пробовал искать везде, но, похоже, никто не хочет делать то, что я делаю! Даже используя «Просмотр в рабочем режиме» в моем мобильном браузере, я не могу обойти свой отзывчивый дизайн. Мне не нравятся мобильные версии, потому что я чувствую себя ограниченным. Я полностью в порядке с обычным веб-дизайном, так как я могу легко ущипнуть и увеличить масштаб содержимого, которое меня интересует! – user2488354

ответ

3

Первое, что приходит в голову - это функция JavaScript (/ jQuery), которая добавляет или удаляет файл CSS из схемы HTML, когда коммутатор является одним из способов. Вам нужно будет создать отдельный CSS-файл, который будет содержать только ваши ответные медиа-запросы, но это не должно быть большой проблемой.

1

Если вы используете серверный язык, один из способов сделать это - предоставить ссылку на информацию запроса, такую ​​как http://mywebsite.com/?full=1, для зрителей, которые хотят просмотреть полный сайт. Вы проверили бы, существует ли переменная full в данных запроса и проверьте, есть ли ее 1. Если это так, вы должны установить соответствующую переменную сеанса full в значение true. Затем всякий раз, когда страница загружается, проверьте, соответствует ли переменная сеанса full. Если это так, то используйте файл «Полный CSS». Если это не так, обратитесь в файл «Отзывчивый CSS». Я полагаю, вы могли бы использовать файлы cookie вместо переменных сеанса. Я немного ржавый в серверном отделе.

Вы также можете сделать это в JavaScript с помощью файлов cookie.

+0

Должен ли я работать над двумя отдельными файлами CSS? Невозможно установить окно просмотра пользователя? – user2488354

+0

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

1

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

В <head>:

<link rel="stylesheet" href="responsive.css" id="responsiveStyle"> 

В <body>:

<a href="javascript:toggleResponsive()">Toggle</a> 

Javascript:

function toggleResponsive() { 
    var responsiveStyle = document.getElementById('responsiveStyle'); 
    if(responsiveStyle.rel === "stylesheet") { 
     responsiveStyle.rel = ""; 
    } else { 
     responsiveStyle.rel = "stylesheet"; 
    } 
} 
+1

Я также хотел бы порекомендовать, что если вы используете JavaScript, вы должны сохранить их предпочтение в cookie, чтобы при переходе на другую страницу вашего веб-сайта все равно было бы правильно переключено. – SombreErmine

+0

Это хороший момент, но не заданный в вопросе. Было бы приятным дополнением. –

Смежные вопросы