Wt

Here is the code

ImageViewer::ImageViewer(const std::string &image,Point2_ imgs,int prefferedWidth,bool enabledMouseTracking)
: WPaintedWidget()
{
setImage(image,imgs,prefferedWidth);
setPreferredMethod(Wt::RenderMethod::PngImage);

touchStarted().connect([=](const Wt::WTouchEvent  &e){

    if(e.targetTouches().size()==1) {
        if(isTranslatingImage)return;
        auto ct=e.changedTouches()[0];
        m_reference=Point2_<int>(ct.widget().x,ct.widget().y);
        isTranslatingImage=1;
        touchTranslateId=ct.identifier();
    }
    else if( e.targetTouches().size()==2){
        // Two-finger touch gesture detected.
        // Calculate the distance between the two touch points.
        const auto& touch1 = e.touches()[0];
        const auto& touch2 = e.touches()[1];
        pitchInitialDistance = sqrt(
                    (touch1.screen().x - touch2.screen().x) * (touch1.screen().x - touch2.screen().x) +
                    (touch1.screen().y - touch2.screen().y) * (touch1.screen().y - touch2.screen().y));
        pitchInitialScale= 0.5*(m_scale.x+ m_scale.y);
        pitchCenter={ 0.5*(touch1.screen().x  + touch2.screen().x),0.5*( touch1.screen().y + touch2.screen().y)};
        isPitchingImage=true;

    }
});
touchEnded().connect([=](const Wt::WTouchEvent  &e){

    isTranslatingImage=isPitchingImage=false;
});
touchMoved().connect([=](const Wt::WTouchEvent  &e){
    if(isPitchingImage){
        const auto& touch1 = e.touches()[0];
        const auto& touch2 = e.touches()[1];
        auto dist= sqrt(
                    (touch1.screen().x - touch2.screen().x) * (touch1.screen().x - touch2.screen().x) +
                    (touch1.screen().y - touch2.screen().y) * (touch1.screen().y - touch2.screen().y));
        auto factor=(dist/pitchInitialDistance);

        setScale(pitchCenter ,pitchInitialScale*factor ); 
        update();
    }


    else if(isTranslatingImage){
        for(auto ct:e.changedTouches()){
            if(ct.identifier()==touchTranslateId){
                m_delta.x += double( ct.widget().x - m_reference.x) * 1.0/m_scale.x;
                m_delta.y += double( ct.widget().y - m_reference.y) * 1.0/m_scale.y;
                m_reference=Point2_<int>(ct.widget().x,ct.widget().y);
                update();
            }
        }
    }
});

}

preventDefaultAction should prevent these touches from triggering the default browser action.

You could also add the appropriate viewport meta tag to <head-matter> in your wt_config.xml, e.g.:

<meta name="viewport" content="width=device-width, initial-scale=1" />