只要添加这个，一切都很好:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

简而言之，没有。

您不能将CSS应用于iframe中加载的HTML，除非由于跨域资源限制，您可以控制iframe中加载的页面。

简单的回答是:不，对不起。

仅仅使用CSS是不可能的。你基本上需要控制iframe内容，以便对它进行样式化。有一些方法使用javascript或你选择的web语言(我读过一点，但我自己不熟悉)来动态插入一些所需的样式，但你需要直接控制iframe内容，这听起来好像你没有。

您可以先检索iframe的内容，然后像往常一样对它们使用jQuery选择器。

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

好运！

显然，它可以通过jQuery完成:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

是的。看看另一个线程的细节: 如何将CSS应用到iframe?

const cssLink = document.createElement("link");
cssLink.href  = "style.css";  
cssLink.rel   = "stylesheet";  
cssLink.type  = "text/css";  
frames['frame1'].contentWindow.document.body.appendChild(cssLink); 
//     ^frame1 is the #id of the iframe: <iframe id="frame1">