在移动设备中使用浏览器时，我的网站显示不同
在移动设备中使用浏览器时，我的网站显示不同
提问于 2021-01-12 12:45:58
我有一个这样的html代码：
<div id="markContainer" class="maxW1000">
<div id="titleRow">
Title
</div>
<div class="card-box listPhotos">
<iframe id="mNote"
src="https://classlive.stume.net/mnote.html" frameborder="0">
</iframe>
</div>
</div>CSS如下所示：
#titleRow{
background-color: #00a7d0;
height: 40px;
}
.listPhotos {
width: 100%;
cursor: pointer;
height: calc(100vh - 40px);
}
#mNote{
width: 100%;
height: 100%;
}我在桌面上使用chrome浏览器，它是这样显示的。iframe有自己的按钮，如下所示：
但当我在安卓或iPhone中通过浏览器打开时，它看起来是这样的。它看起来比设备屏幕还高，最后一个按钮隐藏在外面：
回答 2
Stack Overflow用户
发布于 2021-01-12 13:04:12
你可以使用下面的css或者也可以使用javascript来使你的站点响应。
@media only screen and (min-width:363px) and (max-width:400px) {
#titleRow{
background-color: #00a7d0;
height: 40px;
}根据需要设置属性
Stack Overflow用户
发布于 2021-01-12 16:59:33
问题出在iframe内部。您需要在iframe中设置组件的样式
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65678173
复制相关文章
相似问题
腾讯云开发者
