Можно ли указать настраиваемую ширину для правил мультимедиа CSS для использования в режиме рабочего стола?

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

Я немного искал в googled, и единственное, что я видел, это установить пользовательскую ширину в метатеге viewport. Но правила СМИ css не слушаются.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=1000"> 
    <!-- CSS --> 
    </head> 
    <body style="width:1000px;"> 
    <div class="responsive"> 
     <p>Why does the CSS media rule still take effect even though I've specified a width in the viewport meta tag?</p> 
     <p>I've misunderstood them i bet!</p> 
     <p>How can i force it to think its being viewed in another resolution?</p> 
    </div> 
    <div class="indicator"></div> 
    </body> 
</html>

CSS

.responsive { 
    padding: 20px; 
    background: orange; 
    color:black; 
} 

@media (max-width: 500px) { 
    .responsive { 
    background: green; 
    color:white; 
    } 
} 

.indicator { position:fixed; top:0; right:500px; height:100%; width:1px; border-right:2px dashed red; padding:0; }

Живой пример

http://liveweave.com/jB0OfH

Обновление

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

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

источник

2016-12-29 BjarkeCK

Я бы попробовал установить стиль ширины в элементе html, а не в элементе body. Но, видимо, это не имеет значения; viewport (как указано в мета-заявлении) не совпадает с окном (как указано в медиа-запросе). Боюсь, вам не повезло. –

Кстати, вы, кажется, говорите, что «рабочий стол CSS» такой же, как «невосприимчивый». Но если вы так думаете, вы делаете это неправильно. –

@MrLister Можете ли вы подробно остановиться на этом? – BjarkeCK

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

Wrap всю страницу в iframe, который имеет width:100% и min-width:1000px

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     iframe, body, html { 
     width:100%; 
     height:100%; 
     padding:0; 
     border:none; 
     min-width:1000px; 
     } 
    </style> 
    </head> 
    <body> 
    <iframe src="linkToPage"></iframe> 
    </body> 
</html>

источник

2016-12-30 11:22:06 BjarkeCK

Рассмотрим положить .responsive класс на элемент тела, а затем написать свой CSS, как

function toggle() { 
 
    document.body.classList.toggle("responsive"); 
 
}

.class { 
 
    padding: 20px; 
 
    background: orange; 
 
    color: black; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
    
 
@media (max-width: 500px) { 
 
    body.responsive .class { 
 
    background: green; 
 
    color: white; 
 
    } 
 
}

<body class="responsive"> 
 
    <div id="box" class="class"></div> 
 
    <button onclick="toggle()">Toggle responsive</button> 
 
</body>

С .responsive класса на теле, запрос СМИ начнется в. Без .responsive класса на теле, он будет проигнорирован.

источник

2016-12-30 14:08:31

Да, это правильно, что я должен был сделать. – BjarkeCK

Можно ли указать настраиваемую ширину для правил мультимедиа CSS для использования в режиме рабочего стола?

ответ

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