Should work correctly on an iPad

[mikehadlow]

Currently doesn't work well on iPads. Layout is not preserved and scaled and the menus don't work.

[sugizo]

to accomodate responsive and resizeable in svg perhaps can solve with : e.g.

function renderSvg(){
    var svgContainer = d3.select('#svgPlaceholder').append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("preserveAspectRatio", "xMinYMin meet")
        .attr("viewBox", "0 0 svg_width svg_height")
}

change

• id with your svg id
• svg_width and svg_height with your calculation, consider enough to add space from calculation
• xMinYMin (min x y oriented) or xMidYMid (middle screen x y oriented)

[sugizo]

pls ignore previous comment, thought that guitardashboard used d3js to define the svg and javascript to calculate total svg width and height in index.html e.g.

<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" id="chromatic"></svg>
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 160 500" id="modes"></svg>
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" id="cof"></svg>
<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1160 300" id="gtr"></svg>

[mikehadlow]

@sugizo Thanks for the preserveAspectRatio hint, now works nicely on iPad and scales for all screen types.