gpt4 book ai didi

html - 是否可以为 CSS 媒体规则指定自定义宽度以强制使用桌面模式?

转载 作者:行者123 更新时间:2023-11-28 02:46:21 25 4
gpt4 key购买 nike

我想给我的移动用户一个桌面模式,但我真的不想为我拥有的每个 css 文件制作一个非响应式 CSS 版本,所以我想知道如果没有它是否可行。

我用谷歌搜索了一下,我看到的唯一建议是在视口(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

更新

它确实有效(只是不适用于桌面 - 仅适用于移动设备)。它设置视口(viewport)窗口的分辨率,我猜这相当于在 PC 上自行调整浏览器的大小。

所以您基本上不能在 PC 上使用视口(viewport)进行任何操作,而且我正在制作的响应选项将不起作用。仍然会喜欢一个不涉及 i 帧的解决方法。

最佳答案

这不是一个好的解决方案,所以我不会将其标记为正确,但它是一个解决方案...

将整个页面包裹在 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>

关于html - 是否可以为 CSS 媒体规则指定自定义宽度以强制使用桌面模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41388153/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com