Media 3

Con estilo inline (touch-action:none; max-width; height)

<!-- Panel con estilo inline recomendado para móviles -->
<div style="border:1px solid #ddd; padding:8px; margin:10px 0; font-family:system-ui">
  <h4 style="margin:4px 0 10px">Con estilo inline (touch-action:none; max-width; height)</h4>

  <!-- Interactivo: pan/zoom + leyenda, X en π -->
  <svg id="grid-a1"
       style="touch-action:none; max-width:100%; height:420px;"
       width="720" height="420"
       data-mode="interactive"
       data-range-x="-2pi,2pi"   data-range-y="-1.6,1.6"
       data-step-x="pi/2"        data-step-y="0.4"
       data-funcs="sin(x); cos(x)"
       data-labels="sen(x); cos(x)"
       data-colors="#1976d2; #d32f2f"
       data-legend="true"        data-clip="true">
  </svg>

  <div style="height:12px"></div>

  <!-- Snapshot: bloquea pan/zoom, tan(x) con anti-puentes -->
  <svg id="grid-a2"
       style="touch-action:none; max-width:100%; height:420px;"
       width="720" height="420"
       data-mode="snapshot"
       data-range-x="-2pi,2pi"   data-range-y="-5,5"
       data-step-x="pi/4"        data-step-y="1"
       data-funcs="tan(x)"
       data-labels="tan(x)"
       data-colors="#e53935"
       data-legend="true"        data-clip="true">
  </svg>
</div>