在非移动友好页面上创建移动友好小部件
Creating a mobile-friendly widget on a non-mobile-friendly page
快速背景:
我正在尝试制作一个移动友好的小工具。我的客户有非移动友好页面,这种情况不太可能很快改变。
尝试的解决方案:
我想这不会那么糟糕。只需使用position:fixed
从页面流中删除小部件,插入视口元标记,然后按。。。正确的看看这个小提琴。
问题:
尝试的解决方案在某些移动设备上中断。当使用同事的手机时,他们能够从所谓的position:fixed
元素中滚动!(有问题的手机是安卓4或5,所以它不是2.1-2.3错误。)我很确定iPhone上也会出现同样的行为。
从本质上讲,它的行为似乎就像是页面左上角的position:absolute
。
尝试的解决方案详细信息:
我首先用javascript:附加视口元标记
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
让我们假设一个非常基本的HTML模板:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
以及以下CSS:
.hide-overflow {
overflow: hidden;
}
.overlay {
position: fixed;
-webkit-backface-visibility:hidden; /* Not that this does anything */
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table;
overflow: hidden;
z-index: 1000;
}
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
display: inline-block;
width: 800px;
height: 500px;
}
@media (max-width: 800px) {
.overlay * {
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
当然,我认为这还不够。我还添加了以下javascript,以防止在<body>
和最外层的<div>
元素上滚动:
// This only shows up when the widget is activated--it's removed on deactivation.
$('body').addClass('hide-overflow');// Just adds overflow:hidden, in case you forgot ;)
$('body > div').addClass('hide-overflow');
在我手机的(GalaxyTabletNote)默认浏览器上,这非常有效!没有问题!如前所述,在iPhone、有问题的Android设备等上,您可以滚动离开position:fixed
元素,就好像它实际上是position: absolute
一样。如何让position:fixed
工作?
解决方案比我想象的要简单一些。使用javascript,我已经将hide-overflow
类附加到了body和第一个div元素。那个班级看起来是这样的:
.hide-overflow {
overflow: hidden;
}
解决我问题的是将其更改为以下内容:
.hide-overflow {
overflow: hidden;
width: 100% !important;
height: 100% !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
就是这样!只需在小部件显示时将此类添加到<body>
标记中,并在小部件隐藏时将其删除即可。
这是正在工作的小提琴。
相关文章:
- D3.js:如何在svg上移动鼠标时创建弹出事件
- 在非移动友好页面上创建移动友好小部件
- 为多个平台创建移动框架
- 创建一个变量并在页面之间移动时“存储它”,jQuery
- 我想在混合移动应用程序中使用Sqlite插件(Cordova)创建一个示例项目
- 如何使用一个移动的三角形/矩形创建画布动画
- 如何在javascript中为桌面和移动设备创建不同的onclick行为
- Javascript创建一个图像并使其移动
- 如何使“按钮”在鼠标按下时创建一个可移动的 DIV,并将“鼠标按下”切换到新的 DIV
- 动态添加/创建的移动滚动条无法正常工作
- 在动态创建的输入上使用向下箭头键将光标移动到下一个输入
- 从 JSON 数据动态创建 Jquery 移动导航栏
- 通过拖动移动动态创建的 DIV
- 使用 jquery 移动版创建邮件警报
- 如何仅在移动设备上创建HTML5滑块,否则jQuery UI
- jQuery 移动创建表无法正确遍历 xml
- 在包含区域内动态移动创建分组对象?(html5canvas - fabric.js)
- 悬停时根据光标的位置移动创建的元素
- 如何在 Javascript 中的最后一个 li 之后移动创建的 li
- 使用JXA移动创建的文件