Creating a mobile-friendly widget on a non-mobile-friendly page
Question
Quick background:
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.
Attempted solution:
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! ...right? See this here fiddle.
The Problem:
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! (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.
Essentially, it seems to be behaving as though it were position:absolute on the top-left corner of the page.
Attempted Solution Details:
I start by appending the viewport meta tag with javascript:
$('head').append('<meta name="viewport" content="width=device-width,initial-scale=1"/>');
Let's just assume a very basic HTML template:
<html>
...
<div class="overlay">
<div class="modal">
<div class="content">...</div>
</div>
</div>
...
</html>
and following 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:
// 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! 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 . How do I get position:fixed to work?
1 answers
solution1
0 ACCPTED 2015-03-19 18:10:38
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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.