部署到 Web 服务器后，样式未应用于 iframe

Question

我正在使用 id 选择器来设置 iframe 的样式：

<div class="text-center">    
    <iframe src="@Url.Content("~/HTML/slideView.html")" id="iframeStyle" 
            marginheight="0" marginwidth="0"></iframe>
</div>

和CSS:

@media screen and (max-width: 1199px) and (min-width: 401px) {
    #iframeStyle {
        width: 700px;
        height: 400px;
        max-width: 100%;
        overflow: hidden;
        border: none;             
    }
    #idImg {
        width: 700px;
        height: 400px;        
    }
}

@media screen and (max-width: 400px) {
    #iframeStyle {
        width: 360px;
        height: 190px;
        max-width: 100%;
        overflow: hidden;
        border: none;          
    }
    #idImg {
        width: 360px;
        height: 190px;        
    }
}

元数据：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>   
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>

它在本地主机上运行完美，并且当浏览器的宽度大于 400px 或小于 400px 时，#iframeStyle 总是会调整大小。

但是，在部署到 smarterasp.net 之后，#iframeStyle 总是设置为 @media screen and (max-width: 400px) 即使我以全屏显示打开网站（在个人电脑上）。也就是说，我总是看到很小 iframe，即使我调整浏览器大小也不会改变大小。

如何为设置正确的样式 iframe?

Answer 1

它看起来是正确的，我建议

回退到媒体查询之前，看看它做了什么。
添加 !important 标签，看看它是否有效。
检查开发控制台并查看正在使用的控制台，以及在调整 window
大小时是否有任何变化

请告诉我哪一个对你有用:)

更新：

因为您正在通过 Razor 加载样式:

@Styles.Render("~/Content/css")

那么该样式不会应用于普通 html 页面。

只需在不使用 Razor 的情况下加载 CSS，样式就会应用到您的 html 页面：

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />

部署到 Web 服务器后，样式未应用于 iframe

Style is not applied to iframe after deployment to web server

html

css

asp.net-mvc

iframe

web-deployment