Just prevent the touchend event. It will let the browser scroll the page when you touch the element but won’t let it emit artificial mouse events. element.addEventListener(‘touchend’, event => { event.preventDefault(); });
I see that it’s an old question, but i faced this problem recently. I’m using window.unload and it works fine in ios browsers (although if you look at Apple documentation it seems to be deprecated and they recommend to use document.pagehide)
It’s not possible to check if app is installed from a web page. You could do it inside an other app by checking if your url scheme can be opened using UIApplication’s -canOpenURL: method, but there is no javascript equivalent to this. However, you can use the following workaround: <script language=”javascript”> function open_appstore() { window.location=’http://itunes.com/’; … Read more
Update, May 29 Doh! I so stupid. The below, while true…ish doesn’t address the question well enough. If you want that configuration of the rotation to stay the same as you have illustrated, add a div between .scroll and .el, and style it such: {perspective:300px;} Thus, it would seem that you want the .pers div … Read more
I used this JavaScript solution for solving that problem: if ( navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight ) { var fixViewportHeight = function() { document.documentElement.style.height = window.innerHeight + “px”; if (document.body.scrollTop !== 0) { window.scrollTo(0, 0); } }; window.addEventListener(“scroll”, fixViewportHeight, false); window.addEventListener(“orientationchange”, fixViewportHeight, false); fixViewportHeight(); document.body.style.webkitTransform = “translate3d(0,0,0)”; }
This is because of the back-forward cache in Safari. You can use the following code to force a reload when the back-button is pressed. window.onpageshow = function(e) { // e -> event if (e.persisted) { window.location.reload(); } }; Additionally, if you are using jQuery … $(window).bind(“pageshow”, function(e) { // e -> event if (e.originalEvent.persisted) { … Read more
For those still looking for a javascript only fix like I did. I ended up just making a “polyfill” for this; it relies on the max attribute of the slider and determines the best step to force the input range on iOS. You can thank me later 🙂 var diagramSlider = document.querySelector(“.diagram-bar”); function iosPolyfill(e) { … Read more
Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough: @media only screen and (max-device-width: 480px) { /* iPhone CSS rules here */ } You’ll only need (-webkit-min-device-pixel-ratio: 2) if you … Read more
Actually, released touches will be found in the changedTouches array, ie: e.changedTouches[0].pageX // get the end x page coordinate for a released touch I think this is slightly more reliable than going through the originalEvent property. You can read more on changedTouches here: http://www.w3.org/TR/touch-events/#changedtouches-of-a-touchevent
This answer comes with a huge delay, but I post it here just for other people who are struggling to find a solution. Recently Google has implemented the CSS conditional display-mode: standalone, so there are two possible ways to detect if an app is running standalone: Using CSS: @media all and (display-mode: standalone) { /* … Read more