Prevent horizontal scroll in iOS WebApp - javascript

I've encountered similar problems before and could never really understand the workarounds, and so I ended up relying on plugins like iScroll. This is such simple task that I refuse to include a plugin for it - what I want is to prevent horizontal scroll in iOS. This includes the rubber band effect for any content that might be on the page but that isn't visible.
From what I understand I need to disable the rubber band altogether first and then apply the touch scroll to a container element (which I've given the id "touch"). Not sure if this is the right approach?
$(document).bind('touchmove', function(e) {
if (!e.target == '#touch') {
e.preventDefault();
}
});
Style for #touch
-webkit-overflow-scrolling: touch;
overflow: hidden;
height: 100%;
#media only screen and (max-width: 768px) {
width: 768px;
}
This doesn't prevent the horizontal width from staying at 728px however, the user is still able to scroll and see the hidden content. Ideas?

Well, the above metas are useful as such:
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
They prevent that bug in Safari that happens when the user rotates the screen. However, the most proper way to accomplish the desired functionality is:
Use a parent div with overflow hidden and make sure the height of this div is limited according to the viewport and a child div with overflow:auto or the css 3 overflow-y:scroll. So basically if the size of the content inside the child div exceeds the default size of the child, you can vertically/horizontally scroll through it. Because the parent has overflow:hidden, the content outside of the child will not be displayed, so you get a proper scroll effect. ** Also, if you use overflow: hidden and prevent default for all touchEvents, there will be no scrolling or weird browser behavior**
With the help of JavaScript, make sure that every element in the DOM is scaled according to the viewport, so avoid using static sizes for as many elements as possible.
Bind the touchStart, touchMove and touchEnd events. Safari doesn't always fire a touchEnd event unless a touchMove event is listened for as well. Even if it's just a placeholder, put it there to avoid the inconsistent behavior in Safari.
Horizontal sliding is possible in two ways: load new content in the same div after you detect the slide direction or populate that child div with all the elements and you are good to go and actually shifting the margins/position of the child inside it's parent to 'scroll'. Animation can be used for a slicker interface.
Bind your touch event listeners. I don't know what library or event management system you are using, but it doesn't matter. Just call the respective function for the respective task.
Get the slide direction(left/right):
var slideBeginX;
function touchStart(event){event.preventDefault();//always prevent default Safari actions
slideBeginX = event.targetTouches[0].pageX;
};
function touchMove(event) {
event.preventDefault();
// whatever you want to add here
};
function touchEnd(event) {
event.preventDefault();
var slideEndX = event.changedTouches[0].pageX;
// Now add a minimum slide distance so that the links on the page are still clickable
if (Math.abs(slideEndX - slideBeginX) > 200) {
if (slideEndX - slideBeginX > 0) {
// It means the user has scrolled from left to right
} else {
// It means the user has scrolled from right to left.
};
};
};

This work for me on Android, iPhone and iPad.
<!doctype html>
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1, user-scalable=no" name="viewport" />
<title>Main</title>
</head>
<body>
...
</body>
</html>

Following link might be useful to you, here vertical is disabled and horizontal enabled, you just need to tweak the code a little for your purpose.
jquery-tools-touch-horizontal-only-disable-vertical-touch
In case you aren't concerned about vertical sliding, you can try the following code also -
document.ontouchmove = function(e){
e.preventDefault();
}
Hope it helps.

If you dont use the meta you will always get a rubber band effect.
<meta name="viewport" content="width=device-width" />
Even if the page fitted exactly the user would still be able to stretch the page wider than it should be able to go, you must use the view port to prevent this, there is no other way...

Related

How to get the same window.innerWidth regardless of the zoom level so my responsive layout won't change while zooming?

I've built my app using reactand styled-components. It's all client-side rendered and routed.
All my responsive layout is based on the window.innerWidth value and I do lots of:
const MyComponent_DIV = styled.div`
width: ${props => props.isMobile ? "200px" : "400px"};
`;
const [windowWidth,setWindowWidth] = useState(window.innerWidth);
... some code
return (
<MyComponent_DIV
isMobile={windowWidth <= 768}
/>
);
NOTE: I also attach a resize event listener, so my app is responsive to resize events. So far so good.
function handleResize() {
console.log("FROM RESIZE: " + window.innerWidth); // I CAN SEE THIS VALUE CHANGING WHEN ZOOMING IN AND OUT
setWindowWidth(window.innerWidth);
}
But the weird thing, at least to me, is when I found out that changing the browser ZOOM level (on desktop and mobile) affects the window.innerWidth value. And it also fires the resize event.
What I'm trying to accomplish:
Be responsive to resize events, but not to "ZOOM events"
When user changes the zoom level, I want my layout to remain the same and show scroll bar when zoomed in.
Basically I want the zoom to work normally like a zoom and not trigger a re-render on my app.
EXTRA:
This is my meta viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, shrink-to-fit=no">
QUESTION
Does it make sense for the zoom event to change the window.innerWidth property? I mean, isn't that completely counter intuitive?
How can I avoid it, or at least, do some workaround for my app to behave the way I need?

How to lock the screen width for any browser?

Just go to this test website : ltdcoapp.uphero.com , from you smart phone and then slide the screen to see what is on the right and the problem is : that yes the screen slides and shows what I am trying to hide on the right side .
my attempts so far was to use body{overflow-x: hidden;} which only works with desktop browsers though .
can you please tell me what to do to prevent this ?
PS: I'm really not trying to get traffic to the website , but it is the only way to show you the problem easily
Have you set a corresponding width with your overflow:hidden property?
Edit: Relative values like 100% for your width won't work (as they'll also contain the right part of the screen). Fix it to absolute pixel values (in this example: 1024px):
body {
overflow-x: hidden
width: 1024px
}
It might also help to add the corresponding viewport meta-tags in the header:
<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />
Also, would disabling scrolling altogether be a solution? Disable scrolling in all mobile devices
This one will prevent any touch response , which is kinda useless in my situation .
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
This one will be very uselful , but the problem is that it prevents both horizontal and vertical scrolling.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
This only works for desktop browsers .
body{overflow-x: hidden;}
Tried this a few times and all it do it to prevent user from scaling the page , which is useful at some point , but doesn't solve the problem of scrolling to the right .
<meta name="viewport" content="width=device-width; initial-scale = 1.0;user-scalable=no" />
Thx dominikus , you surely helped .

iScroll 4: Allow users to zoom out from page content as well as zoom in

I am trying to implement a mobile website with the following appearance:
a fixed header
scrollable, zoomable content
content zoomed out when page is first loaded
I have been experimenting with IScroll 4 and the results seem good but there is one problem that I can't find a way around. The contents of my pages are user-generated html tables which are often wider than the screen. I would like the full width of the table to be visible when the user lands on the page. They can then zoom in if they want to.
If you look at the IScroll zoom demo in a mobile browser it demonstrates the problem. The page content is wider than the screen and it's not possible to zoom out, only zoom in.
Changing the initial-scale in the viewport meta tag doesn't help as the whole page, including the header, gets zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=yes, minimum-scale=0.5, maximum-scale=1.0">
(the header will eventually be a JQueryMobile element which I don't want to mess with).
And modifying the zoomMin setting in iscroll.js (v4.2.2, line 119) from 1 to something smaller (e.g. 0.5) breaks things:
// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4,
You can zoom out further but the content then gets stuck and you can't resize it without reloading the page.
Does anyone know a way around this? I'm happy to try other frameworks if necessary.
To allow zooming out, you can use the zoomMin and zoomMax that you identified, but do it when you instantiate iscroll, rather than modifying iscroll.js:
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, onBeforeScrollStart: null,
zoomMin:0.5, zoomMax: 6 });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
I also found I needed to explicitly set the width of the 'scroller' div, like so:
$('#scroller').width(your_width);

how to resize / rezoom webpage in ipad

I have a website that uses jquery mobile for it's mobile version. I have a problem when I am changing it from portrait to landscape it zooms in correctly, but when I flip to portrait, it stays same zoom level and is wider then the view which breaks user experience.
I use regular:
<meta name="viewport" content="width=device-width, initial-scale=1">
from all the search I did, this should do. Unfortunately it isn't working for me.
Here is my question, I can use onorientationchange event to trigger resizing of the page, I am just not sure how to go about it. Can you help please?
P.S. website is here if you would like to take a peek http://tmg.dev.dakic.com/mobile
Thank you,
Zeljko
Try this, I had a similar issue:
$(window).bind('orientationchange', function(event) {
if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
$('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
$('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=2.0');
$(window).resize();
} else {
$('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
$('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=2.0');
$(window).resize();
}
}).trigger('orientationchange');
Try otherwise using the resize() function at certain events:
$(window).resize();
I typically use the orientationchangeevent to add / remove CSS classes to the content, and go from there, rather than re-size the viewport. Apple provide some stand-alone example code, although from memory I think that it only includes 90° and 0° orientations—you need -90° and 180° too, as in #zyrex comment.
iPhoneOrientation sample code (developer.apple.com)
Update per comment:
To clarify, I don't re-size HTML entities themselves, rather change the classes being used, and rely on CSS to style accordingly. To take a simplistic example, say I want to switch between two classes on the body element, depending on device orientation, I would do something like this in my Javascript:
window.onorientationchange = updateOrientation;
// (Might want to do this onload too)
function updateOrientation(){
var o = window.orientation, body = document.querySelector('body');
switch(o){
case 0: case 180:
body.className = 'portrait';
break;
case 90: case -90:
body.className = 'landscape';
break;
}
}
… and something like this in the default mark-up:
<body class="portrait">
<!-- stuff here -->
… and then CSS which does whatever is required—e.g. a different position for the body element's background:
body {background: url('images/something.png') no-repeat}
body.portrait {background-position: 30% 50%}
body.landscape {background-position: 10% 25%}
Update #2
You may also need to tinker with the maximum-scale directive in your meta tag. Mobile Safari typically does a zoom when changing from portrait to landscape, instead of re-doing the page layout, and that may be what you're seeing.
The maximum-scale value prevents this, but you should note that this also means users can't do the normal pinch-to-zoom thing. Here's how the tag would look:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Be sure to check the answers here too:
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
It seems no-one knows. From what I could see, content on the page somewhere is wider then device-width and this is where the problem originates. However, how to go about solving this is still not quite clear.

iPhone - Hide Address Bar on Page Load

I have a web page that is intended to be loaded on a person's iPhone. When the page is loaded, I want to hide the status and address bar that is at the top. I have seen other sites do this. In an attempt to accomplish this, I have placed the following code in the section of my web page:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script type="text/javascript">
function page_Load() {
setTimeout(function() { window.scrollTo(0, 1); }, 100);
}
</script>
The "page_Load" function is triggered through the onload event of the page's body element. Oddly, when the page loads, the status/title bar is hidden, however, not the address bar.
How do I hide both the status/title bar and the address bar when a web page loads?
Thank you!
For those of you using jQuery here's an even simpler version:
$('body').scrollTop(1);
Figured it out. It turns out my page needed to be "longer". From a absolute perspective, the sizing was correct, but I need to add a couple of pixels at the bottom. This hid the address bar as desired.
Thank you.
A quick and dirty jQuery method...
$(function() {
function orientationChange(e) {
$("body").scrollTop(1);
}
$("body").css({ height: "+=300" }).scrollTop(1);
$(window).bind("orientationchange", orientationChange);
});
This also hides the bar when a person changes their orientation (because it does become visible again normally). Just add this somewhere on your page and it'll automatically (regardless of 100% height/width/whatever) do what you seek. I have not measured the exact height of the address bar but it appears to be around 70px. I put 300 there just to ensure it works.
This page explains more up-to-date status of 'fullscreen'.

Categories

Resources