1. Long press to save the picture

Sometimes I will encounter the function of long press to save pictures on the mobile terminal, which can be achieved by opening the H5 page on wechat, so the effect of ordinary browsers may be different.

  • Safari didn’t work as well when opened, such as a function to save qr codes, and my iPhone 11 didn’t respond to a long press.

  • The opening effect of wechat browser is shown below:

  • The opening effect of UC browser is shown as follows:

To solve these problems, you can use CSS -webkit-touch-callout.

Add the -webkit-touch-callout attribute to the image

img {
    -webkit-touch-callout: default;
}
Copy the code

You can see safari is ready to save.

2. Cancel the long press to save the picture

  • Wechat clients or UC browsers can use pointers-events to specify under what circumstances (if any) a particular graphic element can be the target of mouse events.
img{
    pointer-events:none;
}
Copy the code
  • You can try-webkit-touch-calloutSet tononeBut the effect is not good
img {
    -webkit-touch-callout: none;
    user-select: none;
}
Copy the code