html – 修复移动设备屏幕外的元素

发布时间：2020-12-14 16:43:06 所属栏目：资源来源：网络整理

导读：我正在开发一个小部件,可以作为iframe嵌入到页面中(iframe将通过 javascript注入和设置样式). iframe应放在右下角.我只能控制iframe的样式. 我创建了以下演示页面,演示了测试主页中的问题： !DOCTYPE htmlhtml head meta charset="UTF-8"/ titleHello world!

我正在开发一个小部件,可以作为iframe嵌入到页面中(iframe将通过 javascript注入和设置样式). iframe应放在右下角.我只能控制iframe的样式.

我创建了以下演示页面,演示了测试主页中的问题：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Hello world!</title>
        <meta name="viewport" content="width=device-width"/>
    </head>
    <body>
        <p id="greeting" style="width:1000px">Loading...</p>
         <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
    </body>
</html>

在桌面浏览器上,此代码可以正常工作,但在(某些)移动设备上,iframe在屏幕上不可见.如果我试图突出显示放置在灰色区域的元素.

为什么会发生这种情况,如何设置iframe样式以便放置在右下角？

编辑：这是来自Galaxy S3仿真(Chrome)的屏幕截图. iframe在灰色区域是不可见的.我认为它在物理Nexus 5X设备上是一样的.

非常感谢！

解决方法

给#greeting提供了1000px的宽度,这就是移动宽度之外的元素,你可以像使用媒体查询一样修复这个问题. 992宽度开始设备的纵向视图

@media (max-width:992px){
 #greeting { width:100% !important; }  
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Hello world!</title>
        <meta name="viewport" content="width=device-width"/>
    </head>
    <body>
        <p id="greeting" style="width:1000px">Loading...</p>
         <iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
    </body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!