Можно ли отключить запросы @media или заставить разрешение? Причина: разрешить iphone видеть сайт на рабочем столе?

У меня есть мой сайт, сильно модифицированный с помощью запросов @media, для отображения на мобильных телефонах очень тонких. Тем не менее, мои пользователи просят настольную версию сайта (доступно по ссылке).

Чтобы продвинуться дальше, сам сайт рабочего стола также модифицируется запросами @media в зависимости от разрешения. Я думал о том, чтобы выбрать одно "настольное" разрешение, скажем, 1440x900, и заставить мобильный телефон отображать это разрешение?

Возможно ли это, может быть, через JavaScript? Кроме того, можно ли вообще отключить эти запросы @media?

Спасибо!

Ответ 1

У меня была такая же проблема с клиентом. Но проблема была в том, что CSS файлы 120+ содержали медиа-запросы. Поэтому я установил ширину области просмотра. Я использовал этот фрагмент на этом сайте и работает нормально. Используя это, даже вы можете дать пользователям возможность переключаться между адаптивным дизайном и неотвечающим дизайном.

$(document).ready(function(){
   $('meta[name="viewport"]').prop('content', 'width=1440');
});

Примечание: 1440 - ваша предпочтительная ширина экрана.

Надеюсь это поможет :)

Ответ 2

Я бы добавил класс к вашим <html> или <body>, таким как class="force-desktop", а затем на ваш селектор мультимедиа добавьте

@media () {
    body:not(.force-desktop) {
        //styles
    }
}

или что-то подобное

Ответ 3

Решение IJas без JQuery выглядит так:

var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', width=1440);

Ответ 4

Легче всего добавить любые стили, которые могут быть отключены в их собственных таблицах стилей, с атрибутами заголовка, чтобы облегчить их поиск. Они могут быть встроенным стилем или ссылками на файлы .css.

function toggleSheet(title){
  var S=document.styleSheets, L=S.length, temp;
  while(L){
    temp=S[--L];
    if(temp.title===title){
    temp.disabled=!temp.disabled;
    return temp;
  }  
}