Joe’s response has some good best practices in it, but I think the problem you’re describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here’s a sample of how to apply this to your … Read more
This answer is no longer applicable, unless you are developing for a very old iOS device… Please see other solutions 2011 answer: For a web/html app running inside iOS Safari you want something like document.ontouchmove = function(event){ event.preventDefault(); } For iOS 5 you may want to take the following into account: document.ontouchmove and scrolling on … Read more
I had same issue with apple devices like iPhone and iPad, I turned off the low power mode and it worked and you should also include playsinline attribute in video tag like this: <video class=”video-background” autoplay loop muted playsinline> It only worked when including playsinline.
By adding this css style: appearance: none; -moz-appearance: none; -webkit-appearance: none; As per https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
You need to trick the browser to use hardware acceleration more effectively. You can do this with an empty three-dimensional transform: -webkit-transform: translate3d(0, 0, 0) Particularly, you’ll need this on child elements that have a position:relative; declaration (or, just go all out and do it to all child elements). It is not a guaranteed fix, … Read more
As far as I know you can not, from a browser, check if an app is installed or not. But you can try redirecting the phone to the app, and if nothing happens redirect the phone to a specified page, like this: setTimeout(function () { window.location = “https://itunes.apple.com/appdir”; }, 25); window.location = “appname://”; If the … Read more
It’s possible to prevent webpage scaling in safari on iOS 10, but it’s going to involve more work on your part. I guess the argument is that a degree of difficulty should stop cargo-cult devs from dropping “user-scalable=no” into every viewport tag and making things needlessly difficult for vision-impaired users. Still, I would like to … Read more
The minimal-ui viewport property is no longer supported in iOS 8. However, the minimal-ui itself is not gone. User can enter the minimal-ui with a “touch-drag down” gesture. There are several pre-conditions and obstacles to manage the view state, e.g. for minimal-ui to work, there has to be enough content to enable user to scroll; … Read more
Core jQuery doesn’t have anything special for touch events, but you can easily build your own using the following events touchstart touchmove touchend touchcancel For example, the touchmove document.addEventListener(‘touchmove’, function(e) { e.preventDefault(); var touch = e.touches[0]; alert(touch.pageX + ” – ” + touch.pageY); }, false); This works in most WebKit based browsers (incl. Android). Here … Read more
Two options… 1. Set the format-detection meta tag. To remove all auto-formatting for telephone numbers, add this to the head of your html document: <meta name=”format-detection” content=”telephone=no”> View more Apple-Specific Meta Tag Keys. Note: If you have phone numbers on the page with these numbers you should manually format them as links: <a href=”https://stackoverflow.com/questions/3736807/tel:+1-555-555-5555″>1-555-555-5555</a> 2. … Read more