[英]Creating a mobile-friendly widget on a non-mobile-friendly page
I'm trying to make a mobile-friendly widget. 我正在尝试制作适合移动设备的小部件。 My customers have non-mobile friendly pages, and this isn't likely to change anytime soon.
我的客户有不适合移动设备浏览的页面,而且这种情况不太可能很快改变。
I figured this wouldn't be so bad. 我认为这不会太糟。 Just remove the widget from the page flow by using
position:fixed
, insert a viewport meta tag, and presto! 只需使用
position:fixed
从页面流中删除小部件,插入一个视口元标记,然后保存! ...right? ...对? See this here fiddle.
看到这里摆弄。
The attempted a solution breaks on some mobile devices. 尝试解决的方法在某些移动设备上中断。 When using a co-worker's phone, they were able to scroll away from the supposedly
position:fixed
element! 当使用同事的电话,他们能够从所谓滚动远
position:fixed
元素! (Phone in question is Android 4 or 5, so it's not the 2.1-2.3 bug.) I'm pretty sure this same behavior occurs on iPhones. (有问题的手机是Android 4或5,所以它不是2.1-2.3的错误。)我很确定在iPhone上也会发生这种现象。
Essentially, it seems to be behaving as though it were position:absolute
on the top-left corner of the page. 本质上,它似乎表现得好像是
position:absolute
在页面的左上角。
I start by appending the viewport meta tag with javascript: 我首先用javascript附加视口元标记:
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
Let's just assume a very basic HTML template: 让我们假设一个非常基本的HTML模板:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
and following CSS: 和以下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;
}
}
Of course, I didn't think this would be enough. 当然,我认为这还不够。 I also added the following javascript to prevent scrolling on the
<body>
and outer-most <div>
element: 我还添加了以下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');
On my phone's (Galaxy
Tablet
Note) default browser, this works great! 在我的手机(Galaxy
Tablet
Note)的默认浏览器上,这个效果很好! No problems! 没问题! As mentioned before, on iPhones, questionable Android devices, etc., you can scroll away from the
position:fixed
element as though it were actually position: absolute
. 如前所述,在iPhone,可疑的Android设备等上,您可以滚动到
position:fixed
元素,就好像它实际上是position: absolute
。 How do I get position:fixed
to work? 我如何获得
position:fixed
工作?
The solution was a bit simpler than I'd thought. 解决方案比我想象的要简单。 Using javascript, I was already appending my
hide-overflow
class to the body and first div element. 使用javascript,我已经将我的
hide-overflow
类附加到body和第一个div元素上。 That class looked like this: 该类看起来像这样:
.hide-overflow {
overflow: hidden;
}
What fixed my problem was changing it to the following: 解决我的问题的原因是将其更改为以下内容:
.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;
}
That's it! 而已! Just add this class to the
<body>
tag when the widget shows, and remove it when the widget is hidden. 只需在显示小部件时将此类添加到
<body>
标记中,然后在隐藏小部件时将其删除即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.