Default template output is not responsive — generated docs unreadable on narrow screens
Environment: JSDoc 4.0.5 (default template), also reproduces on 3.x
The default template generates documentation that is not responsive:
templates/default/tmpl/layout.tmplemits no<meta name="viewport">;static/styles/jsdoc-default.csscontains no@mediaqueries;- layout is two fixed columns —
#main { float: left; width: 70% }andnav { float: right; width: 30% }.
On narrow screens (phone, or a half-width browser window) the navigation
sidebar is squeezed into 30% of the width and the main content into 70%,
so neither is readable. Opening the generated index.html from a phone /
narrow viewport reproduces this immediately; there is no mobile layout at all.
Suggested fix: make the default template responsive out of the box:
- Add
<meta name="viewport" content="width=device-width, initial-scale=1">to the<head>inlayout.tmpl; - Add
@mediarules tojsdoc-default.cssthat stack the navigation above the content below a breakpoint (e.g. ~900px) and let#maintake the full width, so the same generated docs work on any screen.
I have a working patch of this kind applied locally as an external config
(custom layoutFile + custom.css, ~40 lines of CSS) that is verified to
render the same generated docs correctly on both desktop and phone; I can
attach it here if useful.
Source: jsdoc/jsdoc