是否可以指定用於強制桌面模式的CSS媒體規則的自定義寬度？

我想給我的手機用戶一個桌面模式，但我真的不想爲每個css文件製作非響應式CSS版本，所以我想知道是否有可能沒有。是否可以指定用於強制桌面模式的CSS媒體規則的自定義寬度？

我GOOGLE了一下，和我見過的唯一的建議是設置在視口中meta標籤定製的寬度。但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

更新

它實際上工作（只是不在桌面上 - 只在手機上）。它設置了視口窗口的分辨率，我猜這相當於在PC上自己調整瀏覽器的大小。

所以，你基本上不能使用視口的任何東西在PC上，我所作出的響應選項將無法正常工作。仍然喜歡這個工作的解決方法不涉及i幀。

來源

2016-12-29 BjarkeCK

我會嘗試在html元素而不是body元素上設置寬度樣式。但顯然沒關係;該視口（如meta語句中設置的）與窗口不同（如媒體查詢中所引用的）。恐怕你運氣不好。 –

順便說一下，您似乎在說「桌面CSS」與「無響應」相同。但是，如果你真的這樣想，你就錯了。 –

@MrLister你能詳細說明一下嗎？ – BjarkeCK

這不是一個很好的解決方案，所以我不會把它標記爲正確的，但它是一個解決方案...

裹在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類body元素，然後再編寫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媒體規則的自定義寬度？

回答

相關問題