Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get rid of magnifying glass in iOS web app

Tags:

People also ask

How do I get rid of the magnifying glass in Safari?

Answer: A: Answer: A: Settings > General > Accessibility > Zoom > Turn Zoom Off (or read instructions on how to activate and deactivate as needed).

Why does Magnifier keep popping up on iPhone?

From what you've described, it sounds like that feature has been enabled at some point, in your accessibility shortcuts. If you go to: Settings > Accessibility > Magnifier. Make sure it's set to “Off” or toggle it off. Make sure you're not using any third party apps that could cause the issue.


I am currently exploring web apps for iOS devices and use PhoneGap to create a "native" application out of it. The problem I have with this is the magnifying glass, that I don't want to be shown when selecting paragraphs (or bit of text). I have tried a lot of solutions but nether works. I use this CSS to disable all copy, selection and such for those fields I wan't:

*[untouchable] {
    -webkit-user-drag: none;
    -webkit-user-modify: none;
    -webkit-highlight: none;

    -webkit-touch-callout:  none;
    -webkit-user-select:    none;
    -khtml-user-select:     none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    -o-user-select:         none;
    user-select:            none;
}

This works fine, but it still shows the magnifer/loupe when I touch and hold on text:

Touch + hold shows magnifier on text

Is there a real solution to this? It would be awesome with a simple CSS property such like -webkit-magnifier: none or something like that. If there's a JavaScript solution, that would be fine too, but maybe a overkill.

Since I am using PhoneGap and it uses UIWebView to show the page, there might be a way of disabling the magnifier for that - but I haven't looked that much into the native source.

Thanks in advance :-)