Возникли проблемы при переключении таблиц стилей CSS (с мобильного на рабочий стол)

У меня есть веб-сайт с таблицей стилей большого экрана (рабочий стол/ноутбук) и таблицей стилей для мобильных/карманных компьютеров. Код в разделе заголовка для двух таблиц стилей выглядит следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="/styles.css" media="screen and (min-device-width: 800px)" />
<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="mobile-/styles.css" media="only screen and (max-device-width: 480px)" />
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="mobile-/styles.css" media="screen" />
<![endif]-->

Когда я загружаю сайт на мобильный телефон, мобильная таблица стилей загружается отлично, и сайт выглядит великолепно. Аналогично с большой таблицей стилей экрана на рабочем столе/ноутбуке. Я хотел бы добавить ссылку на нижнюю часть мобильного сайта, чтобы просмотреть полный сайт. Это очень распространено, и я видел множество решений, использующих php, jquery и т.д. Для переключения таблиц стилей.

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

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